如何始终在HighCharts中显示plotLine？ [英] How to always show the plotLine in HighCharts?

问题描述

我正在用plotLine创建一个HighChart。 plotLine有一个固定值，而数据可以在图表之间变化。

HighChart根据数据的最大值自动缩放y轴，但它不会因此，如果数据范围包含plotLine值，则会显示plotLine，如果不是，则会从视口中裁剪出来。

/ p>

示例：

  $（function（）{
 $（document）.ready（function（）{
 var chart = new Highcharts.Chart（{
 chart：{
 renderTo：'container'，
 type：'column' 
}，
 title：{
 text：'各地区的虚拟数据'
}，
 xAxis：{
 categories：['Africa'，'美元'，'亚洲'] 
}，
 y轴线：{
 plotLines：[{
值：450，
 color：'＃ff0000'，
 width：2，
 zIndex：4，
 label：{text：'goal'} 
}] 
}，
系列：[{
 name：'Year 1800'，
 data：[107，31，650] 
}] 
}）; 
}）;以上代码的JSFiddle： $ b）; 
  

http://jsfiddle.net/4R5HH/3/ =noreferrer> http://jsfiddle.net/4R5HH/3/

默认数据显示了球门线（红色），但是如果我将数据更改为[107,31,250]，那么plotLine会退出图形视口并因此变为不可见。

解决方案

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

  {
名称：'目标'，
类型：'scatter'，
标记：{
启用：false 
}，
数据：[450] 
 } 
  

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

I am creating a HighChart with a plotLine in it. The plotLine has a fixed value, while the data can vary between charts.

HighChart scales the y-axis automatically based on the maximum value of data, but it doesn't consider the plotLine's value in its calculations.

Hence, if the data range encompasses the plotLine value, the plotLine gets shown, but gets cropped out of the viewport if not.

Example:

$(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 for above code: http://jsfiddle.net/4R5HH/3/

The goal line (in red) is shown for the default data, but if I change the data to [107, 31, 250], then the plotLine goes out of the graph viewport and hence becomes invisible.

解决方案

You need to add in a point to you chart but disable the marker. I added a new series with scatter plot type and its value equal to the goal value:

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

See updated jsFiddle: http://jsfiddle.net/wergeld/4R5HH/4/

这篇关于如何始终在HighCharts中显示plotLine？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！