为什么我的辅助yAxis与Highcharts中的xAxis不匹配?

时间:2017-09-18 11:40:50

标签: javascript jquery highcharts

我正在使用Highcharts构建组合列/散点图。我的xAxis数据是一组分类国家,在yAxis [0]和yAxis [1]上有两组数值数据。

我试图基本上复制这个HighCharts示例:

http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/combo-dual-axes/

这是我的版本:

https://jsfiddle.net/MossTheTree/37r1w7f7/

使用xAxis:

xAxis: [{
    categories: ["People's Republic of China",
                'United States', 
                'India', 
                'Australia',
                'Indonesia',
                'Russian Federation',
                'South Africa',
                'Germany',
                'Poland',
                'Kazakhstan',
                'Rest of the world'],
    labels: {
        rotation: -45,
        style: {
            fontSize: '13px',
            fontFamily: 'Verdana, sans-serif'
        }
    },
    crosshair: true
}],

和yAxis:

yAxis: [{
    title: {
        text: 'Coal production (Megatonnes)'
    },
    labels: {
        format: '{value} Mt'
    },
    min: 0,
    max: 4000,
    tickInterval: 250
},
{
    labels: {
        format: '{value}%'
    },
    title: {
        text: '% of world total'
    },
    min: 0,
    max: 100,
    opposite: true
}],

系列:

series: [{
    name: 'Production',
    type: 'column',
    data: [3527, 813, 691, 509, 469, 349, 252, 185, 136, 107, 671],
    tooltip: {
        valueSuffix: ' Mt'
    }
},{
     name: 'Percentage of World Total',
     yAxis: 1,
     type: 'scatter',
    data: [45.8, 10.5, 9.0, 6.6, 6.1, 4.5, 3.3, 2.4, 1.8, 1.4, 8.6],
     tooltip: {
        valueSuffix: '%'
    }      
}]

一般情况下,除了共享的工具提示不起作用外,它们都正确显示。 以某种方式绘制到yAxis [1]的数据与xAxis分类数据不匹配,而是与某些整数x值匹配。

我已经检查并重新检查了我尝试复制的演示,但无法看到任何明显的错误。我的语法有什么问题导致了这个问题?

1 个答案:

答案 0 :(得分:0)

要在共享工具提示中显示散点图,而不是使用散点图,可以使用线型系列和禁用线,方法是将悬停时的lineWidthlineWidthPlus设置为0值。

API参考:
http://api.highcharts.com/highcharts/plotOptions.line.lineWidth
http://api.highcharts.com/highcharts/plotOptions.area.marker.states.hover.lineWidthPlus

例:
https://jsfiddle.net/epwxacoa/