Javascript 如何在nvd3图形上显示两条不同范围的线
我正在使用nvd3库绘制一个折线图,它绘制了两条线,但两条线的值存在巨大差异,一条线(第1行)的值接近500,第二条线(第2行)的值介于0-1之间,因为范围差异,值在0-1之间的线2显示为接近x轴的平线,尽管其值在变化 如果我隐藏第1行,而不是正确地看到第2行的变化,我如何显示这种图形,以下是代码和一些快照:Javascript 如何在nvd3图形上显示两条不同范围的线,javascript,jquery,graph,nvd3.js,Javascript,Jquery,Graph,Nvd3.js,我正在使用nvd3库绘制一个折线图,它绘制了两条线,但两条线的值存在巨大差异,一条线(第1行)的值接近500,第二条线(第2行)的值介于0-1之间,因为范围差异,值在0-1之间的线2显示为接近x轴的平线,尽管其值在变化 如果我隐藏第1行,而不是正确地看到第2行的变化,我如何显示这种图形,以下是代码和一些快照: nv.addGraph(function() { var chart = nv.models.lineChart() .width(80
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;
});
对于nvd3,您可以使用Y轴的对数刻度。对于此类系列非常有用。发现了一些东西,请使用以下任一项规范化y轴上的所有数据:
a'(i) = a(i)/mean(a)
或
一个是数据数组
然后打印数据,并在打印时使用y轴上的formatter将其反规格化:
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);
您可能需要使用具有两个Y轴的multiChart类型 nvd3网站上似乎没有文档,但您可以在此处看到一个实例: 此外,如果您使用的是AngularJS,请查看以下内容:
您能提供数据或样本吗?测试可能的解决方案会更容易…添加了一些测试数据。我尝试了
chart.yScale(d3.scale.log())代码>但它对图形没有影响,y值映射到日志值。
a'(i) = (a(i) - mean(a))/std_dev(a)
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);