我需要添加多个y轴到我的累计Nvd3图表,有人知道我需要修改库的代码的哪一部分吗?
如果您自己完成了这些,并且可以提供一个Jsfiddle,那就更好了。
只有特定的图表类型具有多个y轴功能。
这不适用于累积折线图。
但是对于Multi-chart是可用的。在Angluar NVD3主页上有一个例子,但是它用条形和线条显示了这个例子。
我从主页上分叉了柱塞的例子,并将系列类型更改为所有线条,以向您展示如何使用多重来实现与累积折线图相同的结果。
(为了简化示例,我还更改了数据集)
Pluker例子
第一件事是添加多个轴的选项:
$scope.options = {
chart: {
type: 'multiChart',
height: 450,
margin : {
top: 30,
right: 60,
bottom: 50,
left: 70
},
color: d3.scale.category10().range(),
//useInteractiveGuideline: true,
transitionDuration: 500,
xAxis: {
tickFormat: function(d){
return d3.format(',f')(d);
}
},
yAxis1: {
tickFormat: function(d){
return d3.format(',.1f')(d);
}
},
yAxis2: {
tickFormat: function(d){
return d3.format(',.1f')(d);
}
}
}
};
定义你的数据:
$scope.data = [{key: 'series1', type: "line", yAxis: 1, values:[{x: 10, y: 20}, {x: 20, y: 35}, {x: 30, y:18}]},
{key: 'series2', type: "line", yAxis: 1,values:[{x: 10, y: 12}, {x: 20, y: 26}, {x: 30, y: 15}]},
{key: 'series3', type: "line", yAxis: 2,values:[{x: 10, y: 0.75}, {x: 20, y: 0.9}, {x: 30, y: 0.8}]},
{key: 'series4', type: "line", yAxis: 2,values:[{x: 10, y: 0.2}, {x: 20, y: 0.3}, {x: 30, y: 0.4}]}]
注意,这里针对每个系列设置了type
和yAxis
键。
设置<div>
为normal:
<nvd3 options="options" data="data"></nvd3>
就是这样!
您将得到与使用累积折线图相同的图表,但可以设置多个轴。
如果您指的是在NVD3线形图和条形图中已经可用的单个图表中添加多个y轴。部分代码片段如下所示。
chart.y1Axis
.tickFormat(d3.format(',f'));
chart.y2Axis
.tickFormat(function(d) { return '$' + d3.format(',f')(d) });