在Highstock图表中连接NULL点

时间:2012-03-28 15:59:00

标签: highcharts

API没有显示如何使用connectNulls属性的正确示例。我有几次尝试但没有运气。这就是我所拥有的:

尝试1:

plotOptions : 
{   
   line: { connectNulls : true}
},

这导致:TypeError: Cannot read property 'x' of undefined

尝试2:

plotOptions : 
{   
    series: 
    { 
        gapSize: null, 
        line: { connectNulls : true} 
    }
},

这并没有给我任何错误,所以我认为这是最接近正确的方式,但是没有任何改变:null点两边的点都没有连接。

任何人都可以共享代码剪切,以显示正确的方法吗?

1 个答案:

答案 0 :(得分:19)

highcharts API有两个connectNulls属性示例:一个用于true,另一个用于false

http://api.highcharts.com/highcharts#series.connectNulls

true示例:http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/series-connectnulls-true/

true示例中的摘录:

   plotOptions: {
        series: {
            connectNulls: true
        }
    },

false示例:http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/series-connectnulls-false/

false示例中的摘录:

plotOptions: {
    series: {
        // connectNulls: false // by default
    }
},

false的默认值是一个深思熟虑的选择,因为当您在没有数据时连接值时,结果可能会导致图表查看器方面的错误假设。

<强>更新

这是 Highstock 示例:

$(function() {

        window.chart = new Highcharts.StockChart({
            chart : {
                renderTo : 'container'
            },

            rangeSelector : {
                selected : 1
            },

            title : {
                text : 'AAPL Stock Price'
            },

            series : [{
                name : 'AAPL',
             connectNulls: true, 
                data : [
  [1112832000000,43.56],
[1112918400000,43.74],
[1113177600000,41.92],
[1113264000000,null],
[1113350400000,null],
[1113436800000,37.26],
[1113523200000,35.35],
[1113782400000,35.62],
[1113868800000,37.09],
[1113955200000,35.51],
[1114041600000,37.18],
[1114128000000,35.50],
[1114387200000,36.98],
[1114473600000,36.19],
[1114560000000,35.95],
[1114646400000,35.54],
        [1114732800000,36.06]          
        ],
                tooltip: {
                    valueDecimals: 2
                }
            }]
        });

});