javascript - 如何在nvd3图表上显示不同范围的2条线

Question

我正在使用 nvd3 库绘制折线图，​​它绘制两条线，但两条线值存在巨大差异，一条线(第 1 行)的值接近 500，第二条线(第 2 行)的值在 0- 之间1 由于范围差异，线 2 的值在 0-1 之间，尽管其值在变化，但显示为靠近 x 轴的平坦线。

如果我隐藏第 1 行，而不是正确地看到第 2 行(有变化)，我怎样才能显示这种图表，这里是代码和一些快照:

nv.addGraph(function() {
      var chart = nv.models.lineChart()
                    .width(800).height(420)
                    .margin({left: 100,right:100})  //Adjust chart margins to give the x-axis some breathing room.
                    .useInteractiveGuideline(true)  //We want nice looking tooltips and a guideline!
                    .transitionDuration(350)  //how fast do you want the lines to transition?
                    .showLegend(true)       //Show the legend, allowing users to turn on/off line series.
                    .showYAxis(true)        //Show the y-axis
                    .showXAxis(true)        //Show the x-axis
      ;


  chart.xAxis     //Chart x-axis settings
      .axisLabel('X-axis');

  chart.yAxis     //Chart y-axis settings
      .axisLabel('')
      .tickFormat(d3.format('.02f'));


  d3.select('#graph-chart svg')    //Select the <svg> element you want to render the chart in.   
      .datum(data)        //Populate the <svg> element with chart data...
      .call(chart);          //Finally, render the chart!

  //Update the chart when window resizes.
  nv.utils.windowResize(function() { chart.update(); });
  return chart;
});

此处具有两个值的图表 beta 显示为平线:

仅使用测试版的图表:

编辑:

测试数据

 {
    "key": "key1",
    "values": [
        [
            1697000000,
            19024000000
        ],
        [
            1764000000,
            19764000000
        ],
        [
            1829000000,
            21496000000
        ],
        [
            2122000000,
            20559000000
        ]
    ]
},
{
    "key": "key2",
    "values": [
        [
            1697000000,
            13530000
        ],
        [
            1764000000,
            41790000
        ],
        [
            1829000000,
            29280000
        ],
        [
            2122000000,
            11050000
        ]
    ]
}

Answer 1

您可能想要使用multiChart类型，它具有两个Y轴。

nvd3 网站上似乎没有文档，但您可以在这里看到一个实例:http://goo.gl/DnLU6S

此外，如果您使用 AngularJS，请查看以下内容: http://krispo.github.io/angular-nvd3/#/multiChart