highcharts如何設定y軸指數系列數據（類別），而不是系列（圖例）

如何設置系列數據（類別），而不是系列（圖例） http://jsfiddle.net/n7zxvc4q/highcharts如何設定y軸指數系列數據（類別），而不是系列（圖例）

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軸指數

我希望「時間」使用左側的y軸：秒（y軸：0）和「字節」使用右側的y軸：Mb（y軸x：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 
    }] 
});

來源

2017-10-11 zhaozhili

In 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參考：

來源

2017-10-11 14:04:55

謝謝，它的工作！你救我的一天！ – zhaozhili

highcharts如何設定y軸指數系列數據（類別），而不是系列（圖例）

回答

相關問題