0
私はhtmlとjavascriptの合計noobですので、私の無知を許してください。 nvd3グラフを作成したいと思います。データをndv3に渡し、グラフのhtmlファイルを生成しています。左にではなく中心に合わせるようにチャートを中央に配置する方法、また凡例を右に揃える方法。ファイルの内容は次のとおりです。どうやってセンターndv3 lineChart
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.7.0/nv.d3.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.7.0/nv.d3.min.js"></script>
</head>
<body>
<div id="linechart_with_interactive_guideline">
<svg style="width:600px;height:400px;"></svg>
</div>
<script>
data_linechart_with_interactive_guideline = [{
"values": [{
"y": 2688202.88,
"x": 1492297200000.0
}, {
"y": 7597414.21,
"x": 1492383600000.0
}, {
"y": 2881684.29,
"x": 1492470000000.0
}, {
"y": 5068672.55,
"x": 1492556400000.0
}, {
"y": 3707031.11,
"x": 1492642800000.0
}, {
"y": 4088938.01,
"x": 1492729200000.0
}],
"key": "traffic",
"yAxis": "1"
}];
nv.addGraph(function() {
var chart = nv.models.lineChart().useInteractiveGuideline(true);
chart.margin({
top: 60,
right: 60,
bottom: 20,
left: 80
});
var datum = data_linechart_with_interactive_guideline;
chart.xAxis
.tickFormat(function(d) {
return d3.time.format.utc('%d %b %Y')(new Date(parseInt(d)))
});
chart.yAxis
.tickFormat(d3.format(',r'));
chart.showLegend(true);
d3.select('#linechart_with_interactive_guideline svg')
.datum(datum)
.transition().duration(500)
.attr('width', 600)
.attr('height', 400)
.call(chart);
});
</script>
</body>
</html>