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轴指数系列数据（类别），而不是系列（图例）

回答

相关问题