0
棒グラフのx軸にラベルを表示しようとしていますが、次のように表示しています。誰もがすべてを表示する方法を知っていますか？Nvd3を使用して複数の棒グラフでカスタムx軸ラベルを表示
<!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>
<h2>multiBarChart</h2>
<div id="multibarchart"><svg style="height:350px;width:800px;"></svg></div>
<script>
data_multibarchart = [{
"values": [{
"y": 4,
"x": 'a'
}, {
"y": 9,
"x": 'b'
}, {
"y": 9,
"x": 'c'
}, {
"y": 5,
"x": 'd'
}, {
"y": 6,
"x": 'e'
}, {
"y": 4,
"x": 'f'
}, {
"y": 1,
"x": 'g'
}, {
"y": 7,
"x": 'h'
}, {
"y": 6,
"x": 'i'
}, {
"y": 2,
"x": 'j'
}],
"key": "Count",
"yAxis": "1"
}, {
"values": [{
"y": 8,
"x": 'a'
}, {
"y": 18,
"x": 'b'
}, {
"y": 18,
"x": 'c'
}, {
"y": 10,
"x": 'd'
}, {
"y": 12,
"x": 'e'
}, {
"y": 8,
"x": 'f'
}, {
"y": 2,
"x": 'g'
}, {
"y": 14,
"x": 'h'
}, {
"y": 12,
"x": 'i'
}, {
"y": 4,
"x": 'j'
}],
"key": "Duration",
"yAxis": "1"
}];
nv.addGraph(function() {
var chart = nv.models.multiBarChart();
chart.margin({
top: 30,
right: 60,
bottom: 70,
left: 60
});
var datum = data_multibarchart;
chart.yAxis.tickFormat(d3.format(',.2f'));
chart.tooltipContent(function(key, y, e, graph) {
var x = String(graph.point.x);
var y = String(graph.point.y);
if (key == 'Count') {
var y = String(graph.point.y) + ' call';
}
if (key == 'Duration') {
var y = String(graph.point.y) + ' min';
}
tooltip_str = '<center><b>' + key + '</b></center>' + y + ' at ' + x;
return tooltip_str;
});
chart.showLegend(true);
d3.select('#multibarchart svg').datum(datum).transition().duration(500).attr('height', 350).call(chart);
});
</script>
</body>
</html>