創建條形圖<canvas>在 JavaScript</canvas>

Question

我正在嘗試使用 JavaScript 而不使用<canvas>來使用下面給出的數據來實現此圖。 我有一個條看不到 rest。 我想要至少 4 個帶有 x 軸和 y 軸編號的條形圖（不一定是真的）。

 const g = document.getElementById("graph"); const graphData = { title: "Wild Animals in Istanbul", yAxis: "population", data: [{ name: "pigeon", value: 30, color: "red" }, { name: "wolf", value: 20, color: "blue" } ] } function createGraphIn(g, graphData) { const numOfBars = graphData.data.length; var bar = document.createElement("div"); bar.style.backgroundColor = graphData.data[0].color; bar.style.border = "1px solid black"; bar.style.position = "absolute"; bar.style.left = "20px"; bar.style.top = "100px"; bar.style.width = "30px"; bar.style.height = graphData.data[0].value + "px"; g.appendChild(bar); } createGraphIn(g, graphData);

 div#graph { width: 300px; height: 150px; border: 1px solid black; position: relative; }

 <div id="graph"> </div>

Answer 1

問題是您只為其中一個圖形值制作了一個條形圖。 您需要使用循環或類似的東西來遍歷所有這些。 這是一個例子。

 const g = document.getElementById("graph"); const graphData = { title: "Wild Animals in Istanbul", yAxis: "population", data: [{ name: "pigeon", value: 30, color: "red" }, { name: "wolf", value: 20, color: "blue" } ] } function createGraphIn(g, graphData) { var yAxisName = graphData.yAxis; var yAxis = document.createElement("div"); var yAxisContainer = document.createElement("div"); yAxis.classList.add('y-axis'); yAxisContainer.classList.add('y-axis-container'); yAxis.innerText = yAxisName; yAxisContainer.appendChild(yAxis); g.appendChild(yAxisContainer); const numOfBars = graphData.data.length; var barContainer = document.createElement("div"); barContainer.classList.add("bar-container"); for (var i = 0; i < numOfBars; i++) { var currentData = graphData.data[i]; var bar = document.createElement("div"); bar.classList.add('bar'); bar.style.backgroundColor = currentData.color; bar.style.height = currentData.value + "px"; barContainer.appendChild(bar); var barDescription = document.createElement("p"); barDescription.classList.add('desc'); barDescription.innerText = currentData.name; bar.appendChild(barDescription); } g.appendChild(barContainer); } createGraphIn(g, graphData);

 div#graph { width: 300px; height: 150px; border: 1px solid black; position: relative; top:0px; left:0px; }.bar-container { /* Responsive sizing. Automatically places bars. */ display: flex; /* Bars flow right to left */ flex-direction: rtl; /* Bars aren't directly up against border */ padding: 5px; /* Puts bars at bottom, not top. To align bars to top, use flex-start instead of flex-end */ align-items: flex-end; position:absolute; right:0px; top:0px; float: right; height:calc(100% - 10px); width:calc(100% - 30px); margin:0px; }.bar { border: 1px solid black; min-width:20px; width:fit-content; padding:0px; margin: 5px; // Spaces out bars }.desc { color:white; position:relative; width:100%; bottom:0px; left:0px; margin:0px; margin-left:2px; margin-right:2px; text-align:justify; }.y-axis { transform:rotateZ(-90deg); position:absolute; bottom:50%; left:-23px; }.y-axis-container { width:20px; height:100%; }

 <div id="graph"> </div>

請注意，我更改了一些樣式以消除絕對定位，這在以后可能會出現問題，以支持響應式flex 。 我還將 JavaScript 中的大部分 styles 移動到 CSS。