23

我正在创建一个带有 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 会超出图形视口，因此变得不可见。

4

4 回答 4

32

另一种不引入数据点的选项：

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

这会将 yAxis 的最小值设置为 0（在这种情况下这不太可能是错误的），并将最小范围设置为 450。

请参阅更新的小提琴。

于 2013-08-30T23:03:07.763 回答
19

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

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

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

于 2012-10-26T13:12:19.950 回答
2

在某些情况下，wergeld 的解决方案比 jank 的解决方案更可取，尤其是当您不确定min和时minRange。但是wergeld的解决方案有一个小问题。如果您将鼠标指向绘图线上，它将在该点上显示一个点和工具提示。为避免这种情况，我修改了他的解决方案并添加了解决enableMouseTracking问题的方法。

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

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

于 2018-02-09T11:38:04.040 回答
0

您可以简单地将max属性设置为您将拥有的最大值：

yAxis: {

            max:650 //HERE
            plotLines...

        },
于 2020-02-05T01:47:36.050 回答