nvd3.js中的分组和堆叠多条形图表

时间:2016-04-21 06:58:32

标签: nvd3.js

如何在nvd3.js中为堆叠和分组的多重条形图设置不同的组间距值?

1 个答案:

答案 0 :(得分:0)

我在这里找到了一个例子:Nvd3.js: Stacked/Grouped Multi-Bar Chart

nv.addGraph(function() {
var chart = nv.models.multiBarChart()
  .transitionDuration(350)
  .reduceXTicks(true)   //If 'false', every single x-axis tick label will be rendered.
  .rotateLabels(0)      //Angle to rotate x-axis labels.
  .showControls(true)   //Allow user to switch between 'Grouped' and 'Stacked' mode.
  .groupSpacing(0.1)    //Distance between each group of bars.
;

chart.xAxis
    .tickFormat(d3.format(',f'));

chart.yAxis
    .tickFormat(d3.format(',.1f'));

d3.select('#chart1 svg')
    .datum(exampleData())
    .call(chart);

nv.utils.windowResize(chart.update);

return chart;
});

//Generate some nice data.
function exampleData() {
  return stream_layers(3,10+Math.random()*100,.1).map(function(data, i) {
    return {
      key: 'Stream #' + i,
      values: data
    };
  });
}