简体   繁体   中英

Highcharts - Multiple Y axis

So I have multiple highcharts graphs on a single page. Some of these graphs (line) contain multiple series on one graph. The problem I'm having is being able to select multiple points for one or both of the series.

Here is some sample code on what I'm attempting to do, but it gives me problems...

function hc_json(series, hc_id) {
    $('#' + hc_id).highcharts('StockChart', {
        chart: {
            events: {           //Sets an event listener for the chart
                /*
                 *  If an event is registered it checks if the external zoom/selects are checked. 
                 *  If select is checked it gets the data points that were within the range at sets 
                 *  them as selected. 
                 */
                selection: function(event) {
                    var mode = $('input[name=mode]:checked', '#' + hc_id  + '_control').val();
                    if (mode != hc_id + '_zoom') {

                        for (var i = 0; i < this.series.length; i++)
                        {
                            console.log("Series: ", this.series);
                            console.log("Series length: ", this.series.length);
                            var points = this.series[i].points;   // visible points
                            var xs = event.xAxis[0]; //There seems to be no min/max forxAxis[1]
                            $.each(points, function (i,p) {
                                if (p.x >= xs.min && p.x <= xs.max) {
                                    console.log("Point:", p.x, "is selected");
                                    p.select(true, true);
                                }
                            });
                            //return false;
                        }
                        return false;
                    }
                },
            },

So for instance, I want to be able to select points on the chart for one of the series, but I want to be able to distinguish which series I want to select. I read up on some "visible" series but have yet to figure out how to make a series visible or not.

Please take look at this solution :

 chart: {
        events: {
            selection: function(event) {
                var chart = this,
                    min = event.xAxis[0].min,
                    max = event.xAxis[0].max,
                    txt = '';
                if (event.xAxis) {

                    $.each(chart.series,function(i,serie){
                        $.each(serie.data,function(j,point){
                            if(point.x >=min && point.x <=max) {
                                txt += '<br>serie: ' + serie.name + ' point: '+ point.y;
                                point.select(true,true);
                            }
                        });
                    });

                    $report.html(txt);
                }
            }
        },
        zoomType: 'x'
    },

http://jsfiddle.net/cNRx5/2/

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM