如何在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

Answer 2

使用nvd3，您可以使用Y轴的对数刻度。适用于此类系列。

Answer 3

找到了一些东西，使用任何一个来标准化y轴上的所有数据：

a'(i) = a(i)/mean(a)

或

a'(i) = (a(i) - mean(a))/std_dev(a)

a是数据数组。

然后绘制数据并使用y轴上的格式化器对其进行反规范化，同时绘制：

a(i) = a'(i) * mean(a)    or   a(i) = a'(i) * std_dev(a) + mean(a)

chart.yAxis     //Chart y-axis settings
          .axisLabel('')
          .tickFormat(formatter);