今回は、前回紹介した「【Monaca】D3.jsを使用して折れ線グラフを表示する」のコードを流用し、棒グラフを表示する方法を紹介します。
Monacaデバッガーの結果です。
前回のコードに以下のコードを追加します。
function (d) { }のdは配列（例：[“20200601”, 70]）なので、X軸はd[0]、Y軸はd[1]となります。
style.css
|
1 2 3 |
.bar-orange { fill: #ffab40; } |
d3chart.js
※2020/06/18、棒グラフの下部がずれる不具合を修正。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
var yRange = yAxis.scale().domain(); // bar svg.selectAll("rect") .data(data) .enter() .append("rect") .attr("class", "bar-orange") .attr("x", function (d) { return (x(d[0]) + pos - 10); }) .attr("y", function (d) { return y((d[1] > 0) ? d[1] : 0); }) .attr("width", 20) .attr("height", function (d) { var top = (d[1] > 0) ? d[1] : 0; var bottom = (d[1] > 0) ? ((yRange[0] <= 0) ? 0 : yRange[0]) : d[1]; return Math.abs(y(top) - y(bottom)); }); |
