Question

如何设置系列数据（类别）的y轴索引，而不是系列（图例） http://jsfiddle.net/n7zxvc4q/

Highcharts.chart('container', {
    chart: {
        marginRight: 80
    },
    xAxis: {
        categories: ['time', 'bytes']
    },
    yAxis: [{
        title: {
            text: 'seconds'
        }
    }, {
        title: {
            text: 'Mb'
        },
        opposite: true
    }],

    series: [{
        type: 'column',
        data: [29.9, 71.5],
        name: '192.168.0.1'
    }, {
        type: 'column',
        data: [14.1, 95.6],
        name: '192.168.0.2'
    }, {
        type: 'column',
        data: [34.1, 75.6],
        name: '192.168.0.3'
    }]
});

我希望“时间”使用左侧y轴：秒（yAxis：0）和“字节”使用右侧y轴：Mb（yAxis：1）

我发现其他的不是我想要的方式，就像这样 http://jsfiddle.net/141nw7vw/

Highcharts.chart('container', {
    chart: {
        marginRight: 80
    },
    xAxis: {
        categories: ['192.168.0.1', '192.168.0.2','192.168.0.3']
    },
    yAxis: [{
        title: {
            text: 'seconds'
        }
    }, {
        title: {
            text: 'Mb'
        },
        opposite: true
    }],

    series: [{
        type: 'column',
        data: [29.9, 71.5],
        name: 'time',
        yAxis:0
    }, {
        type: 'column',
        data: [14.1, 95.6],
        name: 'seconds',
        yAxis:1
    }]
});

Answer 1

在Highcharts中x/y/zAxis属性只能分配给一个系列。类别只是如何格式化轴标签的信息（它们的“实际”值是来自categories数组的索引）。一个系列应该只包含一种类型的数据（时间或字节）。您应该像这样重新排列数据（注意所有点都定义了x坐标）：

  series: [
    // time
    {
      data: [
        [0, 29.9]
      ],
      name: '192.168.0.1',
      pointPlacement: -0.3,
      color: 'orange'
    }, {
      data: [
        [0, 14.1]
      ],
      name: '192.168.0.2',
      color: 'pink'
    }, {
      data: [
        [0, 34.1]
      ],
      name: '192.168.0.3',
      pointPlacement: 0.3,
      color: 'blue'

    },
    // bytes
    {
      data: [
        [1, 71.5]
      ],
      name: '192.168.0.1',
      yAxis: 1,
      pointPlacement: -0.3,
      color: 'orange',
      showInLegend: false
    }, {
      data: [
        [1, 95.6]
      ],
      name: '192.168.0.2',
      yAxis: 1,
      color: 'pink',
      showInLegend: false
    }, {
      data: [
        [1, 75.6]
      ],
      name: '192.168.0.3',
      yAxis: 1,
      pointPlacement: 0.3,
      color: 'blue',
      showInLegend: false
    }
  ]

实时工作示例： http://jsfiddle.net/kkulig/rxrys3nx/

我已停用grouping以使用pointPlacement和pointPadding属性定位列。

我为相互对应的系列分配了相同的颜色，并使用showInLegend = false来防止图例中的重复。

然后我编写了一个图例，以便它为所有具有通用名称的系列执行相同的操作（显示/隐藏）：

    legendItemClick: function(event) {
      var series = this,
        chart = this.chart;

      var isVisible = series.visible;
      chart.series.forEach(function(s) {
        if (s.name === series.name) {
          if (isVisible) {
            s.hide();
          } else {
            s.show();
          }
        }
      });
      event.preventDefault();
    }

API参考：

highcharts如何设置系列数据（类别）的y轴索引，而不是系列（图例）

1 个答案: