将图表鼠标事件传递给格式化标签

Question

我使用 Highcharts 创建了一个图表，带有自定义标签来解释图表的详细信息。

现在，如果我将鼠标悬停在任何项目（例如条形图、柱形图）上，则应突出显示或选中相应的自定义标签。

下面是我图表的代码，

$(function () {
        $('#ao-projectssummry-chart').highcharts({
            chart: {
                type: "columnrange",
                inverted : true
            },
            title: { text: null },
            credits: { enabled: false },
            legend: { enabled: false },
            tooltip: {
                formatter: function() {
                    return  '<b>' + this.series.name +'</b><br/>' +
                        Highcharts.dateFormat('%e - %b',
                            new Date(this.x))  ;
                }
            },
            yAxis: {
                opposite: true,
                title : null,
                crosshair: {
                    width: 2,
                    color: "#F26C6D",
                    snap: true,
                    formatter: function () {
                        return '<b>' + this.series.name + '</b><br/>' +
                            Highcharts.dateFormat('%a - %a - %y', new Date(this.x));
                    }
                },
                gridLineWidth: 1,
                gridZIndex: 0,
                type: 'datetime',
                min: Date.UTC(2016, 0, 1),
                max: Date.UTC(2016, 11, 31),
            },
            xAxis: {
                categories: ['Set up', 'Quantification of Benefit', 'Execute', 'Deploy to Pilot Stores', 'Full Deployment', 'Roll out to Production'],
                min: 0,
                max: 5,
                title: null,
                gridLineWidth: 1,
                gridZIndex: 0,
                labels:
                    {
                        enabled: false
                    },
                crosshair: {
                    snap: true

                }
            },
            plotOptions: {
                series: {
                    pointWidth: 10,
                    borderRadius: 0,
                    marker: {
                        enbled : false
                    }

                },
                line: {
                    lineWidth:-1,
                    marker: {
                        enabled: true,
                        radius:0,
                        symbol: 'circle'
                    }

                }
            },
            series: [

                {
                name: "Project Tire Sale",
                data: [
                  {
                      x: 0.40,
                      low: Date.UTC(2016,0,15),
                      high: Date.UTC(2016,2,15),
                      color: "#60B3D1"
                  },
                  {
                      x: 0.40,
                      low: Date.UTC(2016,2,15),
                      high: Date.UTC(2016,4,24),
                      color: "#60B3D1"
                  },
                  {
                      x: 0.40,
                      low: Date.UTC(2016,4,7),
                      high: Date.UTC(2016,6,15),
                      color: "#9CCB01"
                  }
                  ,
                  {
                      x: 0.40,
                      low: Date.UTC(2016, 6, 7),
                      high: Date.UTC(2016, 8, 15),
                      color: "#9CCB01"
                  },
                  {
                      x: 0.40,
                      low: Date.UTC(2016, 8, 7),
                      high: Date.UTC(2016, 10, 15),
                      color: "#9CCB01"
                  }
                ]
                },
                {
                    name: 'Project Tire Sale',
                    type: 'line',
                    data: [
                        {
                            x: 0.40,
                            y: Date.UTC(2016,2,15),
                            marker: {                        
                                symbol: 'url(/../Content/Img/ao-calendar.png)',

                            }
                        },
                        {
                            x: 0.40,
                            y: Date.UTC(2016,4,10),
                            marker: { 
                                symbol: 'url(/../Content/Img/ao-graph.png)',
                            }
                        },
                        {
                            x: 0.40,
                            y: Date.UTC(2016,6,15),
                            marker: { 
                                symbol: 'url(/../Content/Img/ao-runningman.png)',
                            }
                        },
                        {
                            x: 0.40,
                            y: Date.UTC(2016, 8, 5),
                            marker: {
                                symbol: 'url(/../Content/Img/ao-a.png)',
                            }
                        },
                        {
                            x: 0.40,
                            y: Date.UTC(2016, 10, 15),
                            marker: {
                                symbol: 'url(/../Content/Img/ao-green-arrow.png)',
                            }
                        }

                    ]
                }
           ]
        });
    });

下面是预期的输出：

如图所示，如果我们在图表上单击/悬停，则应显示灰色背景。

请帮忙。提前致谢！！

Answer 1

您可以使用 renderer.rect() 方法制作自定义十字准线，您可以使用单击或鼠标悬停事件回调函数获取点的坐标。您可以使用 jQuery 为标签添加新类，并在 css 中以另一种方式格式化标签。您还可以使用 jQuery 使您的 gridLines 更长一点。

在这里您可以找到使网格线更长的功能：

var longerGridLines = function(chart) {
  var d;
  Highcharts.each($('.highcharts-grid')[0].children, function(p, i) {
    d = p.attributes.d.value
    d = d.substring(d.indexOf(' ') + 1, d.length - 1);
    d = d.substring(d.indexOf(' ') + 1, d.length - 1);
    p.attributes.d.value = 'M 0 ' + d;
  })
},

这里你可以找到一个mouseOver事件函数的例子：

mouseOver: function() {
  $('.cross').remove();
  Highcharts.each($('.customLabel'), function(p, i) {
    $(p).removeClass('customLabelSelected');
  })
  $($('.customLabel')[this.x]).addClass('customLabelSelected')
  var xAxis = this.series.xAxis,
      distance = xAxis.toPixels(1) - xAxis.toPixels(0),
      plotTop = xAxis.toPixels(this.x - 0.5),
      width = this.series.chart.chartWidth;
  this.series.chart.renderer.rect(0, plotTop, width, distance)
  .attr({
        fill: 'rgba(200,200,200,0.5)',
        zIndex: 1
   }).addClass('cross')
   .add();
},

您可以在这里找到它如何工作的简单示例： http://jsfiddle.net/0jpovpzr/5/

最好的问候，