11

我需要在我的累积 Nvd3 图表中添加多个 y 轴，有人知道我需要修改库代码的哪一部分吗？

如果您自己完成了这项工作并且可以提供一个 Jsfiddle，那就更好了。

任何建议，将不胜感激。

4

2 回答 2

8

只有特定的图表类型具有多 Y 轴功能。

这不适用于累积折线图。

然而，它可用于多图表。此处的 Angluar NVD3 主页上有一个示例，但它显示了带有条形和线条的示例。

我从主页分叉了 plunker 示例并将系列类型更改为全线，以向您展示如何使用 multi 来实现与累积折线图相同的结果。

（我还更改了数据集以简化示例）

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>的正常：

 <nvd3 options="options" data="data"></nvd3>

就是这样！

您将获得与累积折线图相同的图表，但可以设置多个轴。

于 2015-09-03T10:55:15.340 回答
2

如果您指的是将多个 y 轴添加到NVD3 折线图和条形图中已经可用的单个图表。部分代码片段如下所示。

      chart.y1Axis
          .tickFormat(d3.format(',f'));

      chart.y2Axis
          .tickFormat(function(d) { return '$' + d3.format(',f')(d) });
于 2015-09-02T22:01:50.687 回答