Highstock - 单线系列 - 基于触发器动态创建标记 [英] Highstock - Single line series-Dynamically create marker based on a trigger

问题描述

我使用Highstock - 单线系列绘制数据。

屏幕截图：

JS：

  $（function 
 
 $ .getJSON（'http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=？'，function（data）{
 //创建图表
 var myChart = $（'＃container'）。highcharts（'StockChart'，{
 
 rangeSelector：{
 selected：1 
}，
 
 chart：{
 events：{
 load：function（）{
 var l = this.series [0] .points.length; 
 var p = this.series [0] .points [l-1]; 
 var i = 0; 
 for（i = 1; i  if（this.series [0] .points [i] .y  -  this.series [0] .points [i-1] .y> 10）{
 console.log（this.series [0] .points [i] .y）; 
 this.series [0] .points [i] .update（{
 marker：{
 enabled：true 
} 
}）; 
} 
} 
} 
} 
}，
 
 title：{
 text：'AAPL Stock price'
}，
 
系列：[{
 name：'AAPL'，
 data：data，
 tooltip：{
 valueDecimals：2 
} 
}] 
}）; 
}）; 
 
}）; 
  

I am using Highstock - Single line series for plotting data.http://www.highcharts.com/stock/demo/basic-line. I want to know how to create marker on certain points based on a trigger.If a sudden increase happens in y axis,i want create a marker on that point(ie sudden increase happend from 460 to 470,i want to create a marker on 470).I want to do it in client level.How can i do this.Can anyone help on this.Ataching screenshot,what ideally i need.I want to create marker on highlighted red circles in screenshot.

解决方案

Apologize for taking that much time. I wanted to be thorough to provide you an answer and then there is work as well :-). Here's a working demo : JSFIDDLE

Screen capture:

JS:

$(function() {

    $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function(data) {
        // Create the chart
        var myChart = $('#container').highcharts('StockChart', {

            rangeSelector : {
                selected : 1
            },

            chart:{  
                events:{
                    load: function(){
                        var l = this.series[0].points.length;
                        var p = this.series[0].points[l - 1];
                        var i=0;
                        for(i = 1; i<l ; i++){
                            if( this.series[0].points[i].y - this.series[0].points[i-1].y > 10 ){
                                console.log(this.series[0].points[i].y);
                                this.series[0].points[i].update({
                                    marker: {
                                        enabled: true
                                    }
                                });
                            }
                        }                        
                    }
                }
            },

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

            series : [{
                name : 'AAPL',
                data : data,
                tooltip: {
                    valueDecimals: 2
                }
            }]
        });
    });

});

这篇关于Highstock - 单线系列 - 基于触发器动态创建标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！