xxxxxxxxxx
<html lang="en">
<head>
<meta charset="utf-8" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.6/nv.d3.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.6/nv.d3.min.js"></script>
</head>
<body>
<div id="multibarchart"><svg style="width:500px;height:400px;"></svg></div>
<script>
d3.json('./data.json', function(error, data) {
if (error) return console.error(error);
console.log(data);
nv.addGraph(function() {
var chart = nv.models.multiBarHorizontalChart();
chart.margin({top: 30, right: 60, bottom: 20, left: 60});
var datum = data;
chart.yAxis
.tickFormat(d3.format(',.2f'));
chart.showLegend(true);
d3.select('#multibarchart svg')
.datum(datum)
.transition().duration(500)
.attr('width', 500)
.attr('height', 400)
.call(chart);
});
});
</script>
</body>
</html>
https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js
https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.6/nv.d3.min.js