highcharts - 高亮图表中的突出显示区域

Question

我需要选择列附近的区域。 如何在单击时(如将鼠标悬停在其上时)使区域和列突出显示。

这是我的例子: https://jsfiddle.net/alexserden/wq6j0tnp/9/

$(function () {
    let chart = Highcharts.chart('bar', {
        tooltip: {
            shared: true,
            hideDelay:100,
            useHTML: true,
            outside: true,
            style: {
                fontSize: "13px",
                color: '#505050'
            }
        },
        credits: {
            enabled: false
        },
        plotOptions: {
            column: {
                dataLabels: {
                    enabled: false,
                    style: {
                        fontSize: '13px',
                        fontWeight: 'bold',
                        textOutline: undefined,
                        color: '#505050'
                    }
                }
            },
            ...
        },
        ...
    }
});

Answer 1

您需要为点击添加事件处理程序:

                series: {
                    cursor: 'pointer',

                    marker: {
                        enabled: false
                    },
                    point: {
                      events: {
                          click: function () {
                              // Handle selection
                          }
                      },
                    }
                }

在此事件中，您需要处理区域选择，有一个类似的帖子 here 。所选区域是一个类别。 (API reference)

点击事件的API文档:https://api.highcharts.com/highcharts/plotOptions.area.point.events.click