0
私はd3チャートを初めて使用しています。x軸の日付、y軸の値、x &のy軸の値がツールチップに表示されるd3累積線グラフを作成します。私はそれが仕事と願っていますd3累積線グラフ
[index.htmlファイル]
<!DOCTYPE html>
<meta charset="utf-8">
<style> /* set the CSS */
/*body { font: 12px Arial;}
path { `enter code here`
stroke: steelblue;
stroke-width: 2;
fill: none;
}
.axis path,
.axis line {
fill: none;
stroke: grey;
stroke-width: 1;
shape-rendering: crispEdges;
}*/
</style>
<body>
<input type='button' onclick="Graph()" value='Generate Chart'>
<div id='chart' style="height:300px"><svg></svg>
</div>
</body>
<link href="https://cdn.healthscion.com/Zureka/scripts/nv.d3.min.css" rel="stylesheet" />
<script src="https://cdn.healthscion.com/Zureka/scripts/d3.min.js"></script>
<script src="https://cdn.healthscion.com/Zureka/scripts/nv.d3.min.js"></script>
<script type="text/javascript">
var values = [
[Date.parse("02/09/2016 12:46:45"), 150],
[Date.parse("02/08/2016 12:46:45"), 50],
[Date.parse("02/07/2016 12:46:45"), 130],
[Date.parse("02/06/2016 12:46:45"), 100],
[Date.parse("02/05/2016 12:46:45"), 80],
[Date.parse("02/04/2016 12:46:45"), 50],
[Date.parse("02/03/2016 12:46:45"), 120],
[Date.parse("02/02/2016 12:46:45"), 90],
[Date.parse("02/01/2016 12:46:45"), 110]
];
var valuesfirst = [];
var numericchartdata = [];
valuesfirst.push(values);
numericchartdata.push({
'key': "Series 1", 'values': valuesfirst[0]
});
function Graph() {
nv.addGraph(function() {
var chart = nv.models.cumulativeLineChart()
.x(function (d) {
return d[0]
})
.y(function (d) {
return (d[1] * 100);
}) //adjusting, 100% is 1.00, not 100 as it is in the data
//.color(d3.scale.category10().range())
//.useInteractiveGuideline(false)
;
//tickValues([1078030800000, 1122782400000, 1167541200000, 1251691200000])
chart.xAxis.tickFormat(function (d) {
return d3.time.format('%x')(new Date(d))
});
chart.yAxis.tickFormat(d3.format(',.1%'));
d3.select("#chart" + ' svg').datum(numericchartdata).call(chart);
//TODO: Figure out a good way to do this automatically
nv.utils.windowResize(chart.update);
return chart;
});
}
</script>
が、私にはよさそう問題は何ですか？ – maxymoo
データを累積合計に変換する方法をお尋ねしますか？このケースでは、http://stackoverflow.com/questions/20477177/creating-an-array-of-cumating-sum-in-javascriptをご覧ください。 – maxymoo
こんにちは@maxymoo私はスクリーンショットを共有していますので、要件を参照してください。 – 4605786