Highcharts - 多个Y轴

时间:2014-04-16 18:04:04

标签: javascript highcharts

所以我在一个页面上有多个highcharts图。其中一些图(线)在一个图上包含多个系列。我遇到的问题是能够为一个或两个系列选择多个点。

以下是我正在尝试做的一些示例代码,但它给了我一些问题......

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;
                    }
                },
            },

因此,例如,我希望能够在图表上为其中一个系列选择点,但我希望能够区分我想要选择的系列。我读了一些“可见的”系列,但尚未弄清楚如何制作一个系列可见。

1 个答案:

答案 0 :(得分:1)

请看一下这个解决方案:

 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/