2017-10-09 42 views
0

我有一个4轴的图形,它工作正常,但当单击图例值单独检查时,我遇到了问题。使用4轴时数值和标签文字中的Highchart问题

在这里,我创造了我的问题的样本:

https://jsfiddle.net/276rv95s/

如果您发现温度和恒定的标签值是错误放置。我不知道我的代码有什么问题。

这里是我的代码:

Highcharts.chart('container', { 
    chart: { 
     zoomType: 'xy' 
    }, 
    title: { 
     text: 'Sample' 
    }, 
    xAxis: [{ 
     categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 
      'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], 
     crosshair: true 
    }], 
    yAxis: [{ // Primary yAxis 
     labels: { 
      style: { 
       color: Highcharts.getOptions().colors[2] 
      } 
     }, 
     title: { 
      text: 'Temperature', 
      style: { 
       color: Highcharts.getOptions().colors[2] 
      } 
     }, 

    }, { // Secondary yAxis 
     gridLineWidth: 0, 
     title: { 
      text: 'Rainfall', 
      style: { 
       color: Highcharts.getOptions().colors[0] 
      } 
     }, 
     labels: { 
      style: { 
       color: Highcharts.getOptions().colors[0] 
      } 
     } 
    }, { // Tertiary yAxis 
     title: { 
     text: 'Sea', 
      style: { 
       color: Highcharts.getOptions().colors[1] 
      } 
     }, 
     opposite: true 
    },{ // 4th yAxis 
     gridLineWidth: 0, 
     title: { 
      text: 'Constant', 
      style: { 
       color: Highcharts.getOptions().colors[3] 
      } 
     }, 
     labels: { 
      style: { 
       color: Highcharts.getOptions().colors[3] 
      } 
     }, 
     opposite: true 

    }], 
    series: [{ 
     name: 'Rainfall', 
     type: 'column', 
     yAxis: 1, 
     data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4], 
    }, { 
     name: 'Sea-Level Pressure', 
     type: 'spline', 
     yAxis: 2, 
     data: [1016, 1016, 1015.9, 1015.5, 1012.3, 1009.5, 1009.6, 1010.2, 1013.1, 1016.9, 1018.2, 1016.7], 
     marker: { 
      enabled: false 
     }, 
     dashStyle: 'shortdot', 
     tooltip: { 
      valueSuffix: ' mb' 
     } 
    }, { 
     name: 'Temperature', 
     type: 'spline', 
     yAxis: 3, 
     data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6], 
    }, { 
     name: 'Constant', 
     type: 'spline', 
     data: [2, 6, 5, 1.5, 11, 21.5, 25.2, 26.5, 23.3, 8.3, 1.9, 2.6], 
    }] 
}); 

回答

1

你在你的代码的两个问题,在温度系列恒系列。您需要确保每个系列都指向相应的yAxis索引。

温度系列指向索引3(第四轴),常数没有定义yAxis,这意味着它是默认值。因此,如果您更改为以下:

{ 
    name: 'Temperature', 
    type: 'spline', 
    yAxis: 0, //changed this from 3 to 0 
    data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6], 
}, { 
    name: 'Constant', 
    type: 'spline', 
    yAxis: 3, //added this 
    data: [2, 6, 5, 1.5, 11, 21.5, 25.2, 26.5, 23.3, 8.3, 1.9, 2.6], 
} 

API上series.yAxishttp://api.highcharts.com/highcharts/series.line.yAxis

工作示例https://jsfiddle.net/ewolden/276rv95s/1/

+0

非常感谢你的帮助.. :) –