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>

标签：javascript,angularjs,charts,nvd3-js
来源： https://codeday.me/bug/20190702/1357740.html