javascript - 怎么把NVD3条形图转换成面积线图？

我的plnkr。



目前，我的NVD3图表基于其linePlusBarChart。

问题在于，在我的真实应用程序中，我实际上拥有更多的条刻度数据(4000+)，因此条变得非常细，很难看到，因此我需要改用线面积图。 (在我的plnkr示例中这并不明显，因为它在条形图中使用了较小的假样本大小。)

有没有其他人试图做到这一点？将条形图变成线面积图？

码:

var data = [{
  "key": "Price",
  "color": "#4C73FF",
  "values": [
    [1443621600000, 71.89],
    [1443619800000, 75.51],
    [1443618000000, 68.49],
    [1443616200000, 62.72],
    [1443612600000, 70.39],
    [1443610800000, 59.77]
  ]
}, {
  "key": "Quantity",
  "bar": true,
  "values": [
    [1136005200000, 1],
    [1138683600000, 2],
    [1141102800000, 1],
    [1143781200000, 0],
    [1146369600000, 1],
    [1149048000000, 0]
  ]
}];

nv.addGraph(function() {
  var chart = nv.models.linePlusBarChart()
    .margin({
      top: 20,
      right: 40,
      bottom: 50,
      left: 40
    })
    .x(function(d, i) {
      return i
    })
    .y(function(d) {
      return d[1]
    })
    .color(d3.scale.category10().range());

  chart.xAxis.tickFormat(function(d) {
    var dx = data[0].values[d] && data[0].values[d][0] || 0;
    // return time in hours:
    return d3.time.format('%I:%M')(new Date(dx));
  });

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

  chart.y2Axis
    .tickFormat(function(d) {
      return '$' + d3.format(',f')(d)
    });

  chart.bars.forceY([0]);
  chart.lines.interactive(false);
  chart.height(300);

  d3.select('#chart svg')
    .datum(data)
    .transition().duration(500)
    .call(chart);

  chart.update();
  nv.utils.windowResize(chart.update);

  return chart;
});

最佳答案

NVD3提供了开箱即用的multiChart(example)，它结合了折线图/条形图/面积图。注意:

yAxis1在左侧，yAxis2在右侧。

后缀为“1”的组件图使用左y轴:lines1，bars1，stack1。

您不能使用forceY，因为it's not supported by the stacked area chart从1.8.1开始。您需要手动计算数据的y域，并使用yDomain1和yDomain2在图表上进行设置。

最后，这是一个使用示例数据的简单多图表(NVD3 1.8.1)，左侧为数量(面积)，右侧为价格(线):

var data = [{
  "key": "Price",
  "type": "line",
  "yAxis": 2,
  "values": [
    [1443621600000, 71.89],
    [1443619800000, 75.51],
    [1443618000000, 68.49],
    [1443616200000, 62.72],
    [1443612600000, 70.39],
    [1443610800000, 59.77],
  ]
}, {
  "key": "Quantity",
  "type": "area",
  "yAxis": 1,
  "values": [
    [1136005200000, 1],
    [1138683600000, 2],
    [1141102800000, 1],
    [1143781200000, 0],
    [1146369600000, 1],
    [1149048000000, 0],
  ]
}];

data = data.map(function(series) {
  series.values = series.values.map(function(d) {
    return {
      x: d[0],
      y: d[1]
    }
  });
  return series;
});

nv.addGraph(function() {
  var chart = nv.models.multiChart()
    .margin({
      top: 20,
      right: 40,
      bottom: 50,
      left: 40
    })
    .yDomain1([0, 10])
    .yDomain2([0, 100]) // hard-coded :<
    .interpolate("linear") // don't smooth out the lines
    .color(d3.scale.category10().range());

  chart.xAxis.tickFormat(function(d) {
    return d3.time.format('%I:%M')(new Date(d));
  });
  chart.yAxis1.tickFormat(d3.format(',f'));
  chart.yAxis2.tickFormat(function(d) {
    return '$' + d3.format(',f')(d)
  });

  chart.lines2.interactive(false); // line chart, right axis

  d3.select('svg#chart')
    .datum(data)
    .transition().duration(500).call(chart);

  chart.update();
  nv.utils.windowResize(chart.update);
  return chart;
});

text {
  font: 12px sans-serif;
}
svg {
  display: block;
}
html,
body,
svg#chart {
  margin: 0px;
  padding: 0px;
  height: 100%;
  width: 100%;
}

<link href="http://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.css" rel="stylesheet" />
<script src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.5.2/d3.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.js"></script>
<svg id="chart"></svg>