高图列范围与滚动条

时间:2019-01-10 07:59:05

标签: javascript highcharts

我正在使用Highcharts-more中的columnrange类型。默认的数据标签格式化程序将低/高数据放在范围的两端,这很好。

但是当我使用滚动条时,高标签不会移动跟随滚动, 如何设置以在列范围图中使用滚动条?

示例:enter link description here

Highcharts.chart('container', {
chart: {
    type: 'columnrange',
    inverted: true
},

title: {
    text: 'Temperature variation by month'
},

subtitle: {
    text: 'Observed in Vik i Sogn, Norway, 2017'
},

xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
        'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
        max:4,
        scrollbar: {
        enabled: true
        }
},

yAxis: {
    title: {
        text: 'Temperature ( °C )'
    }
},

tooltip: {
    valueSuffix: '°C'
},

plotOptions: {
    columnrange: {
        dataLabels: {
            enabled: true,
            format: '{y}°C'
        }
    }
},

legend: {
    enabled: false
},

series: [{
    name: 'Temperatures',
    data: [
        [-9.9, 10.3],
        [-8.6, 8.5],
        [-10.2, 11.8],
        [-1.7, 12.2],
        [-0.6, 23.1],
        [3.7, 25.4],
        [6.0, 26.2],
        [6.7, 21.4],
        [3.5, 19.5],
        [-1.3, 16.0],
        [-8.7, 9.4],
        [-9.0, 8.6]
    ]
}]

});

1 个答案:

答案 0 :(得分:0)

这是Highcharts错误,已在master分支中修复,并将在7.0.2版中发布。在此期间,您可以使用master分支中的代码:

<script src="https://github.highcharts.com/master/highstock.src.js"></script>
<script src="https://github.highcharts.com/master/highcharts-more.js"></script>

或更旧的Highcharts版本:

<script src="https://code.highcharts.com/stock/6/highstock.js"></script>
<script src="https://code.highcharts.com/6/highcharts-more.js"></script>

实时演示:https://jsfiddle.net/BlackLabel/cqzn0tu3/

Highcharts文件服务:https://code.highcharts.com/