Highcharts: показывать всплывающую подсказку в любом месте столбца значений серии без использования shared:true?

Возможно, глупый вопрос, но я хочу, чтобы всплывающая подсказка столбца Highcharts отображалась при наведении указателя мыши в любом месте над столбцом или над ним, но я не хочу использовать общий: атрибут всплывающей подсказки: true.

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

Скриншот того, что я пытаюсь спросить: введите здесь описание изображения

Вот скрипка.

Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Find Tauntauns'
    },
    subtitle: {
        text: 'Some site on the web'
    },
    xAxis: {
        categories: [
            'Jan'
        ],
        crosshair: true
    },
    yAxis: {
        min: 0,
        title: {
            text: 'Tauntauns'
        }
    },
    tooltip: {
        headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
        pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
            '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
        footerFormat: '</table>',
        //shared: true,
        useHTML: true
    },
    plotOptions: {
        column: {
            pointPadding: 0.2,
            borderWidth: 0
        }
    },
    series: [{
        name: 'Tokyo',
        data: [7]

    }, {
        name: 'Hoth',
        data: [83.6]

    }, {
        name: 'London',
        data: [48.9]

    }, {
        name: 'Berlin',
        data: [5]

    }]
});

highcharts
person red5    schedule 07.08.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

К сожалению, эта опция недоступна в API для типа серии столбцов, поскольку функциональность pointTracker работает иначе, чем для других серий, таких как линия или разброс.

Моя идея для достижения желаемого результата заключается в рендеринге фиктивных/прозрачных прямоугольников, которые вызовут всплывающую подсказку при наведении курсора мыши.

Демонстрация: https://jsfiddle.net/BlackLabel/3pr4baeq/

events: {
  render() {
    let chart = this;

    chart.series.forEach(s => {
      s.points.forEach(p => {

        if (p.customRect) {
          p.customRect.destroy();
        }
        p.customRect = chart.renderer.rect(p.barX + chart.plotLeft, chart.plotTop, p.pointWidth, p.shapeArgs.y)
          .attr({
            //fill: 'transparent',
            fill: 'yellow'
          })
          .add();
        p.customRect.element.onmouseover = function() {
          chart.tooltip.refresh(p)
        }
      })
    })
  }
}

Вы можете изменить цвет отображаемых прямоугольников на прозрачный, который скроет их.

API: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#rect

API: https://api.highcharts.com/highcharts/chart.events.render< /а>

person Sebastian Wędzel    schedule 10.08.2020