Witam ponownie :). Tym razem mam stronę internetową, na której po kliknięciu przycisku dane mają zostać pobrane z plików JSON, a następnie umieszczone na stronie w formie graficznej. O ile podpis pod wykresem udało mi się zrobić, o tyle z samymi słupkami jest problem. Poniżej umieszczam kod HTML, CSS, JavaScript oraz jednego z pliku JSON(są 3).
HTML
<!DOCTYPE html>
<html>
<head>
<title>PS6 - Zadanie 1</title>
<meta charset="utf-8">
<link rel="stylesheet" href="zad1.css">
</head>
<body>
<h1>Witaj w zadaniu "PS6 - 1"</h1>
<p>
<button value="data1.json">Wykres 1</button>
<button value="data2.json">Wykres 2</button>
<button value="data3.json">Wykres 3</button>
</p>
<figure class="chart" id="wykres1"></figure>
<script src="zad1.js"></script>
<script>
var ps6Wykres = new SimpleChart('wykres1', 400, 400);
var buttons = document.querySelectorAll('p button');
for (var i = 0; i < buttons.length; i++) {
buttons[i].onclick = function(ev) {
ps6Wykres.loadData(ev.target.value);
};
}
</script>
</body>
</html>
CSS
h1 {
text-align: center;
}
figure.chart {
border: 1px solid black;
}
figure.chart figcaption {
font-style: italic;
text-align: right;
padding: 5px;
}
figure.chart > div {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
display: flex;
flex-direction: row;
align-items: flex-end;
justify-content: space-around;
}
figure.chart > div > div {
background-color: rgb(100, 100, 255);
flex: 1;
margin: 0 10px;
}
let elementId = document.querySelector('figure');
function SimpleChart(elementId, width, height) {
// uzupełnij funkcję-konstruktor niezbędnymi elementami aby zrealizować podaną w zadaniu funkcjonalność
let chartParent = document.getElementById(elementId);
chartParent.style.width = width + 'px';
chartParent.style.height = height + 'px';
let kontener = document.createElement('div');
let podpis = document.createElement('figcaption');
this.loadData = function(url) {
// w tej metodzie dopisz kod podciągający dane w formacie 'json' z podanego adresu url
chartParent.appendChild(kontener);
chartParent.appendChild(podpis);
fetch(url).then(res => {
res.json().then(data => {
chartParent.appendChild(kontener);
chartParent.appendChild(podpis);
for(let i=0; i < data.data.length; i++){
console.log(data.data[i].value);
}
for(let i=0; i < data.data.length; i++){
let slupek = document.createElement('div');
kontener.appendChild(slupek);
slupek.style.height = data.data[i].value * '100%';
slupek.style.width = data.data[i].value * '100%';
podpis.textContent = data.label;
}
console.log(data.label);
podpis.textContent = data.label;
});
});
};
}
{
"label": "Ceny paliw 1",
"data": [
{"name": "Pb95", "value": 4.69},
{"name": "Pb98", "value": 5.25},
{"name": "ON", "value": 4.00},
{"name": "ON-zima", "value": 4.42},
{"name": "LPG", "value": 2.24}
]
}