Question

我刚开始探索highcharts API。我正在尝试创建一个高价图表，我可以从图表中选择一些点并编辑/删除值。然而，即使我有选定的点，我也看不到它们在图表上的标记。以下代码适用于highcharts，但不适用于highstock：

 var option = {                           
         chart: {
           renderTo: 'container',
           defaultSeriesType: 'line',
           width: 800,
           height:500,
           events: {
                    selection: function(event) {

                        for (var i = 0; i < this.series[0].data.length; i++) {
                            var point = this.series[0].data[i];
                            console.log("Point:",point.y,point.x);
                            if (point.x >= event.xAxis[0].min &&
                                point.x <= event.xAxis[0].max &&
                                point.y >= event.yAxis[0].min &&
                                point.y <= event.yAxis[0].max) {
                                    console.log("selecting");
                                    this.series[0].data[i].select(true,true);                                       
                                }                               
                        }
                        return false;
                    }
                },
                zoomType: 'xy'
              },

              title: {
                text: "Test",
                margin: 100,
                backgroundColor: '#FCFFC5'
              },


              rangeSelector: {
                    inputBoxStyle: {
                        right: '-280px'
                    },
                    //selected: 0
              },

              xAxis: {
                 type: 'datetime',
                 tickInterval: 14 * 24 * 3600 * 1000, // one week
                 tickWidth: 0,
                 gridLineWidth: 1,
                 labels: {
                    align: 'left',
                    x: 3,
                    y: -3 
             }
              },

              yAxis: [{
                title: {
                    text: yAxisTitle
                },
                labels: {
                    align: 'left',
                    x: 3,
                    y: 16,
                    formatter: function() {
                       return Highcharts.numberFormat(this.value, 0);
                      }
                },
                showFirstLabel: false
              }, { 
             linkedTo: 0,
             gridLineWidth: 0,
             opposite: true,
             title: {
                text: "Target Steps"
             },
             labels: {
                    align: 'right',
                    x: 0,
                    y: 16,
                    formatter: function() {
                       return Highcharts.numberFormat(this.value, 0);
                    }
             },
             showFirstLabel: false
              }],

             legend: {
                 align: 'left',
                 verticalAlign: 'top',
                 y: 20,
                 floating: true,
                 borderWidth: 0
              },

              tooltip: {
                 shared: true,
                 crosshairs: true
              },

              plotOptions: {
                 series: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    marker: {
                       enabled: true,
                    },
                    point: {
                       events: {
                       click: function() {
                          (this).select(true,true);
                          hs.htmlExpand(null, {
                            pageOrigin: {
                               x: this.pageX, 
                               y: this.pageY
                            },
                            headingText: ''+Highcharts.dateFormat('%e. %b %Y', this.x) +':<br/>',                                                                      
                            maincontentText:"Test",                                                                                                     
                            width: 400,
                            height:220


                         });
                      }
                   }
                },
                marker: {
                        lineWidth: 1
                    }
                 }
              },
              series: [{
                 name: seriesName[0],
                 lineWidth: 4,
                 marker: {
                    radius: 4
                 }
              },{
                 name: seriesName[1]
              }],

        };
        var series = {
              data: []
        };
        options.series[0].data = myArray[0];
        options.series[1].data = myArray[1];


        window.historic_chart = new Highcharts.StockChart(options);

如果有人帮我找到解决这个问题的方法，我会非常感激，并解释为什么所选点不会在高档图表上标出。

感谢。

Answer 1

很可能你有时使用dataGrouping，所以你有空的series.data数组。在这种情况下，使用系列groupsData列出点，请参阅：http://jsfiddle.net/awGwn/2/

            events: {
                selection: function (event) {
                    console.log(this);
                    var points = this.series[0].data;
                    if(points.length  == 0 ) {
                         points = this.series[0].groupedData;   
                    }
                    for (var i in points) {
                        var point = points[i];
                        console.log("Point:", point.y, point.x);
                        if (point.x >= event.xAxis[0].min && point.x <= event.xAxis[0].max && point.y >= event.yAxis[0].min && point.y <= event.yAxis[0].max) {
                            console.log("selecting");
                            point.select(true, true);
                        }
                    }
                    return false;
                }
            },
            zoomType: 'xy'

如果这无济于事，请通过升级我的jsFiddle来重新解决问题。

Highstock图表未显示选择了哪些点

1 个答案: