javascript - Highcharts : plot line and plot click event

Question

我正在使用 highchart 来实现一些向下钻取功能。

就我而言，我有一个带有 onclick 事件的面积图。

我想让用户单击面积图来添加线条并更改图表颜色。因此，我有两个功能:一是更改图表颜色，二是在用户单击的位置添加绘图线。

下面是情节线点击事件:

chart: {
        type: 'area',
        events: {
        click: function(evt) {
            var xValue = evt.xAxis[0].value;
            var xAxis = evt.xAxis[0].axis;
            $.each(xAxis.plotLinesAndBands,function(){
                if(this.id===myPlotLineId)
                    {
                        this.destroy();
                        }
                });
                xAxis.addPlotLine({
                    value: xValue,
                    width: 1,
                    color: 'red',
                    //dashStyle: 'dash',                   
                    id: myPlotLineId
                    });
                    }
                }               
            },

这是颜色更新事件，位于plotOptions内

  plotOptions: {
            series: {
            point: {
            events: {
                click: function(event) {
                    //selector
                    if(previousPoint){
                        previousPoint.update({ color: '#FFC7C3' });
                        }
                        this.update({ color: '#fe5800' });

                        //drilldown trigger
                         var date = this.category.replace(/\-/g,'')
                         $("#datepicker").click();
                        //put somewhere else not in the custom
                         $("#drilldowndate").html(parseInt(date));

                         $(window).scrollTop(1700);

                         window.setTimeout(function(){
                            $("#trendDrill").click();
                            },500); 

                        window.setTimeout(function(){
                            $("#periodChecker").text($(".ifNoDrill").data("target"));
                            },1000);
                        }               
                    }
                }
            }
        },

我希望 addplotline 函数和更新绘图颜色函数都在同一次单击上工作，因此当用户单击所需区域时，图表会更改特定颜色和绘图线出现。

JS fiddle 演示: http://jsfiddle.net/Xm4vW/70/

Answer 1

您可以在点单击事件中更改添加绘图线。我创建了两个函数，一个负责更改点的颜色(也在悬停时)，另一个用于添加绘图线:

 var updatePoint = function(point) {
      if (previousPoint) {
        previousPoint.update({
          color: '#7cb5ec',
          marker: {
            states: {
              hover: {
                fillColor: '#7cb5ec',
              }
            }
          }
        });
      }
      previousPoint = point;
      point.update({
        color: '#fe5800',
        marker: {
          states: {
            hover: {
              fillColor: '#fe5800',
            }
          }
        }
      });
    },
    addPlotLine = function(evt) {
      var point = evt.point;
      var xValue = point.x;
      var xAxis = point.series.xAxis;

      Highcharts.each(xAxis.plotLinesAndBands, function(p) {
        if (p.id === myPlotLineId) {
          p.destroy();
        }
      });
      xAxis.addPlotLine({
        value: xValue,
        width: 1,
        color: 'red',
        id: myPlotLineId
      });
    };

您可以在点击事件函数中使用此函数:

point: {
  events: {
    click: function(event) {
      updatePoint(this);
      addPlotLine(event);
    }
  }
}

在这里您可以找到它如何工作的示例:http://jsfiddle.net/Xm4vW/72/