Question

nvd3 linePlusBarChart允许使用多个yAxis，这也显示在他们的示例here中（以及angular-nvd3示例here中）。在示例中（参见掠夺者），他们只使用两个系列的数据，并自动映射到每个yAxis之一。对我而言，这并不会发生。

我的数据如下：

[
  {
    "key": "Series 1",
    "bars": true,
    "values": [ [1425942000, 20], [1425942040, 25], ... ]
  },
  {
    "key": "Series 2",
    "bars": true,
    "values": [ [1425942000, 80], [1425942040, 40], ... ]
  },
  {
    "key": "Series 3",
    "bars": true,
    "values": [ [1425942000, 37], [1425942040, 55], ... ]
  },
  {
    "key": "Series 4",
    "values": [ [1425942000, 20132.44], [1425942040, 40032.93], ... ]
  }
]

因此，从数据中可以清楚地知道，由于规模的巨大差异，第四个系列需要第二个yAxis。

图表配置如下所示（请注意，它是angular-nvd3的配置）：

{
    type: 'linePlusBarChart',
    height: 500,
    margin : {
        top: 50,
        right: 75,
        bottom: 50,
        left: 50
    },
    xAxis: {
        axisLabel: 'Time',
        tickFormat: function(d) {
            return d3.time.format('%Y/%m/%d')(new Date(d));
        }
    },
    x2Axis: {
        tickFormat: function(d) {
            return d3.time.format('%b %Y')(new Date(d));
        }
    },
    y1Axis: {
        axisLabel: 'Just some numbers here',
        axisLabelDistance: -10,
        tickFormat: function(d) {
            return d3.format(',')(d);
        }
    },
    y2Axis: {
        axisLabel: 'Some money numbers',
        axisLabelDistance: 10,
        width: 100,
        tickFormat: function(d) {
            return '$ ' + d3.format(',.2f')(d);
        }
    },
    y3Axis: {},
    y4Axis: {},
    bars: {
        forceY: [0],
        padData: true
    },
    bars2: {
        forceY: [0],
        padData: true
    }
}

但是，我似乎无法找出如何强制某些数据系列将自己附加到某个yAxis。目前，所有四个系列都附在右轴上。

我已经尝试在系列对象上添加yAxis: 1（或yAxis: 2）属性，这是对其他图表类型的处理方式，但它不起作用。

所以，如果有人对我有一些建议，我真的很感激。

加分问题：对于我想要/需要使用的useInteractiveGuideline: true，lineChart是否有某种方式与linePlusBarChart相同？

Answer 1

我自己发现了这个错误。该系列应使用bar: true而非bars: true，然后使用yAxis。

[
  {
    "key": "Series 1",
    "bar": true,   <-- instead of `"bars": true`
    "values": [ [1425942000, 20], [1425942040, 25], ... ]
  },
  ...
]

如何在nvd3的LinePlusBarChart中强制使用特定的yAxis

1 个答案: