如何在HighCharts中始终显示plotLine？

Question

我正在创建一个带有plotLine的HighChart.plotLine具有固定值,而数据可以在图表之间变化.

HighChart根据数据的最大值自动缩放y轴,但在计算中不考虑plotLine的值.

因此,如果数据范围包含plotLine值,则会显示plotLine,但如果不是,则会从视口中裁剪掉.

例:

$(function () {
    $(document).ready(function() {
        var chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'column'
            },
            title: {
                text: 'Dummy Data by Region'
            },
            xAxis: {
                categories: ['Africa', 'America', 'Asia']
            },
            yAxis: {
                plotLines:[{
                    value:450,
                    color: '#ff0000',
                    width:2,
                    zIndex:4,
                    label:{text:'goal'}
                }]
            },
            series: [{
                name: 'Year 1800',
                data: [107, 31, 650]
            }]
        });
    });

});?

上面代码的JSFiddle:http://jsfiddle.net/4R5HH/3/

显示默认数据的目标线(红色),但如果我将数据更改为[107,31,250],则plotLine将退出图形视口,因此变为不可见.

Answer 1

另一个不引入数据点的选项:

        yAxis: {
            minRange:450,
            min:0,
            plotLines:[{
                value:450,
                color: '#ff0000',
                width:2,
                zIndex:4,
                label:{text:'goal'}
            }]
        },

这会将yAxis的最小值设置为0(在这种情况下,这不可能是假的),最小范围设置为450.

看到更新的小提琴.

Answer 2

您需要在图表中添加一个点但禁用标记.我添加了一个散点图类型的新系列,其值等于目标值:

{
     name: 'Goal',
     type: 'scatter',
     marker: {
          enabled: false
     },
     data: [450]
}

查看更新的jsFiddle:http://jsfiddle.net/wergeld/4R5HH/4/