Как сделать эффект наведения на два бара в старших графиках одновременно, есть ли способ с помощью CSS или любого встроенного метода для достижения этой цели?

Question

Я пытаюсь создать эффект наведения на два бара одновременно, есть ли возможность достичь этого с помощью какого-либо существующего метода или внешнего CSS для достижения такого эффекта наведения на событие наведения, присутствующее в старших графиках?можно изменять цвет только одного изображения.

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/highstock/6.0.3/highstock.src.js"></script>
<script src="http://code.highcharts.com/modules/xrange.js"></script>

<div id="container" style="width: 100%; height: 100px"></div>

Highcharts

    Highcharts.setOptions({
        time: {
            useUTC: false
        }
    });

    Highcharts.chart('container',{
        chart:{
            type : 'xrange',
            backgroundColor : '0C0D19',
            renderTo:'container',
            marginRight: 100,
        },
       colors : ['#45AD59','#6699FF'],
        title : { text : '' },
        credits : { enabled : false },
        legend : { enabled : false },
        exporting : {
            buttons : {
                contextButton : {
                    enabled : false
                }
            }
        },
        plotOptions : {
            series : {
                cursor : 'pointer',
            }
        },
        tooltip : {  enabled: false },
        xAxis : {
            type : 'datetime',
            opposite : true,
            startOnTick: true,
            endOnTick: true,
            showLastLabel: true,
            tickLength: 0,
            tickInterval:3600*1000,
            gridLineColor:'#2c2d39',
            gridLineWidth:1,
            min : 1545281770000,
            minPadding: 0,
            dateTimeLabelFormats : {
                millisecond: '%I:%M %P',
                second: '%I:%M %P',
                minute: '%I:%M %P',
                hour: '%I:%M %P',
                day: '%I:%M %P',
                week: '%I:%M %P',
                month: '%I:%M %P',
                year: '%I:%M %P'
            },
            crosshair : {
                snap : false,
                zIndex : 100,
                label: {
                    enabled: true,
                    format: '{value:%I:%M %P}'
                }
            },
            labels : {
                align : 'left',
                style : {
                    color : 'rgba(255, 255, 255, 0.7)',
                    fontSize : '12px'
                }
            },
        },
        yAxis: {
            title: {
                text: ''
            },
             plotBands: [{
                from: -0.21001,
                to: 0.3291,
                color: '#00401f'
            },{
                from:0.5570,
                to:1.275,
                color:'#2f4776'
             }],

            categories: ['Reported','Tracked'],
            reversed: true,
            labels:{
                align:'center',
                style:{
                    color:'rgba(255, 255, 255, 0.7)',
                    fontSize:'12px'
                },
                formatter: function() {
                    return  this.value + '<img></img>';
                },
                useHTML: true
            },
            lineColor: '#2c2d39',
            lineWidth: 1
        },
        series: [{
            pointWidth: 20,
            borderWidth:0,
            borderRadius:0,
            data : [{
                "x": 1545281770000,
                "x2": 1545284950000,
                "y": 1,
                "floor": 3,
                "room": "3001",
                "value": true,
                "hoverId": 0
                }, {
                    "x": 1545285388000,
                    "x2": 1545291448000,
                    "y": 1,
                    "floor": 3,
                    "room": "3001",
                    "value": true,
                    "hoverId": 1,
                }, {
                    "x": 1545303407000,
                    "x2": 1545312167000,
                    "y": 1,
                    "floor": 2,
                    "room": "2001",
                    "value": true,
                    "hoverId": 2,
                }, {
                    "x": 1545312218000,
                    "x2": 1545312338000,
                    "y": 1,
                    "floor": 3,
                    "room": "3000",
                    "value": true,
                    "hoverId": 3,
                }, {
                    "x": 1545314138000,
                    "x2": 1545314738000,
                    "y": 1,
                    "floor": 2,
                    "room": "2001",
                    "value": true,
                    "hoverId": 4,
                }
                    ,{
                    x:1545281701745,
                    x2:1545285267354,
                    y:0,
                },  
                {
                    x:1545285327157,
                    x2:1545292261051,
                    y:0,
                },{
                    x:1545303345999,
                    x2:1545314757609,
                    y:0,
                    className:'manual',
                }
                    ],
            dataLabels: {
                enabled: false
            }
        }]
    })

CSS

 #container .highcharts-grid.highcharts-yaxis-grid path{
    display: none;
 }
 #container .highcharts-axis.highcharts-xaxis path{
    display: none;
 }
 #container .highcharts-point.highcharts-point.highcharts-color-0 rect{
    height: 15px;
    y: 8;
 }
 #container .highcharts-point.highcharts-point.highcharts-color-1 rect{
    y: 27;
    height: 18px;
 }

Вот JSFiddle

Answer 1

Вы можете сделать это, используя Highcharts.SVGRenderer, который позволяет вам построить прямоугольник, и метод Highcharts.SVGElement.on, который позволяет вам добавлять события в SVG-элементы (например, в группу рядов).Проверьте демо и код, указанный ниже.

Код:

  chart: {
    type: 'xrange',
    backgroundColor: '0C0D19',
    renderTo: 'container',
    marginRight: 100,
    events: {
      load: function() {
        var chart = this,
          series = chart.series[0],
          seriesSvg = series.group,
          seriesSvgBBox = seriesSvg.getBBox(),
          width = 80,
          height = seriesSvgBBox.height,
          y = chart.plotTop + seriesSvgBBox.y,
          x,
          tooltip;

        seriesSvg.on('mousemove', function(e) {
          if (tooltip) {
            tooltip.destroy();
          }

          x = e.offsetX - width / 2

          tooltip = chart.renderer
            .rect(x, y, width, height)
            .attr({
              fill: 'rgba(255, 255, 255, 0.2)'
            })
            .css({
              'pointer-events': 'none'
            })
            .add()
            .toFront();
        });

        seriesSvg.on('mouseout', function(e) {
          tooltip.destroy();
          tooltip = null;
        });
      }
    }
  }

Демо:
http://jsfiddle.net/BlackLabel/z2h59pLf/2/

Ссылка API:
https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#rect
https://api.highcharts.com/class-reference/Highcharts.SVGElement#on