Question

我正在使用高图来进行一些向下钻取功能。

在我的情况下，我有一个带有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小提琴演示： http://jsfiddle.net/Xm4vW/70/

Answer 1

您可以在点击事件中更改添加plotLines。我做了两个函数，一个负责改变你的点的颜色（也在悬停时），另一个用于添加plotLines：

 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/

HighChart：绘制线条和情节点击事件

1 个答案: