Highstock - Single line series-Dynamically create marker based on a trigger

问题

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.

回答1:

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
                }
            }]
        });
    });

});

回答2:

Setting marker for points when dataGrouping is enabled may be a little problematic. It would require to use:

chart.series[0].data[index].update({ 
  marker: { 
    enabled: true 
  }
});

But if you will have a lot of points, data will be an empty array or will have grouped data.

That's why I would like to suggest another solution - use flags or scatter series. Then you will just add empty series, and on trigger you will add/remove points.

来源：https://stackoverflow.com/questions/18349637/highstock-single-line-series-dynamically-create-marker-based-on-a-trigger

标签

javascript

jquery

charts

Highcharts

highstock