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.

请参阅updated fiddle。

Answer 2

您需要在图表中添加一个点但禁用标记。我添加了一个新的系列，其中包含散点图类型，其值等于目标值：

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

请参阅更新的jsFiddle：http://jsfiddle.net/wergeld/4R5HH/4/

Answer 3

在某些情况下，wergeld的解决方案比jank的解决方案更受欢迎，尤其是当您不确定minRange和enableMouseTracking时。但是wergeld的解决方案存在一个小问题。如果将鼠标指向绘图线，它将在该点上显示一个点和工具提示。为了避免这种情况，我修改了他的解决方案并添加了{ name: 'Goal', type: 'scatter', marker: { enabled: false }, data: [450], enableMouseTracking: false }以解决问题。

{{1}}

请参阅更新的jsFiddle：http://jsfiddle.net/4R5HH/570/

Answer 4

您只需将 max 属性设置为您将拥有的最大值：

yAxis: {

            max:650 //HERE
            plotLines...

        },

如何在HighCharts中始终显示plotLine？

4 个答案: