Question

我们试图通过代码处理每个列组背景区域，以便在悬停时显示不同的颜色背景。

我们要解决的区域显示在这里：

https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/column-basic/

在上面的代码中，该区域被描述为“ Highcharts十字线类别” ...随着鼠标移动，它会不断重绘...

有人知道如何手动触发此代码以突出显示吗？

highcharts似乎没有为所述列组指定特定的“ G”元素...

Highcharts.charts[0].columns[0].???

Answer 1

您可以在使用column.point.events.mouseOver Documentation时达到这种效果，就像这样：

plotOptions: {
  column: {
    pointPadding: 0.2,
    borderWidth: 0,
    point: {
      events: {
        mouseOver: function() {
          // console.log(this); // To view all params available
          if (this.index < 2){
            this.series.chart.xAxis[0].update({
              crosshair: {
                color: '#5090cc'
              }
            });
          } else if (this.index < 7){
            this.series.chart.xAxis[0].update({
              crosshair: {
                color: '#f0c680'
              }
            });
          } else {
            this.series.chart.xAxis[0].update({
              crosshair: {
                color: '#90d8a2'
              }
            });
          }
        },
      }
    }
  }
},

Fiddle

Answer 2

要动态显示十字准线，可以使用内部drawCrosshair方法：

chart.xAxis[0].drawCrosshair({}, chart.series[0].points[1]);

实时演示： https://jsfiddle.net/BlackLabel/12ok6Lcy/

高图表列组动态突出显示

2 个答案: