highcharts如何為系列數據（類別）而非系列（傳奇）設置y軸索引

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軸：seconds（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/

我禁用了使用pointPlacement和pointPadding屬性對列進行grouping 。

我為相互對應的系列分配了相同的顏色，並使用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參考：

• http://api.highcharts.com/highcharts/plotOptions.column.pointPadding
• http://api.highcharts.com/highcharts/plotOptions.column.pointPlacement
• http://api.highcharts.com/highcharts/plotOptions.column.showInLegend
• http://api.highcharts.com/highcharts/plotOptions.series.events.legendItemClick