Highcharts 如何自定义 enableMouseTracking？

Question

我目前正在使用Highcharts来显示线图上的数据。我已经启用了 enableMouseTracking 选项，以便能够看到悬停在上面的点的值。我正在尝试添加一个 % 在值的最后。例如，我当前的悬停值是4.4，我希望它显示为 4.4%.

我试过在我用来填充图表的值的末尾添加一个百分号，但没有成功，所以我相信我现在需要自定义Highchart本身。在Highcharts doccumentation中，我没有看到任何直接自定义plotOptions部分的内容。

目前正在显示。

希望显示： 1.8%

Highcharts.chart('container', {


    chart: {
        type: 'line',
        backgroundColor: '#fafafa', 
    },
    title: {
        text: stateArr.graphTitle
    },
    xAxis: {
        categories: '2009', '2010', '2011', '2012', '2013', '2014', '2015', '2016', '2017','2018'],
        title: {
            text: 'Year'
        },
    },
    credits: {
        text: stateArr.creditTitle,
        position: {
            align: 'right',
            verticalAlign: 'bottom',
            x: -20,
            y: -20
        }
    },
    exporting: {
        enabled: false
    },
    yAxis: {
        //categories: ['2', '4', '6', '8', '10'],
        title: {
            text: 'Percentage Change (%)'

        }
    },
    plotOptions: {
        line: {
            dataLabels: {
                enabled: false
            },
            enableMouseTracking: true
        }
    },

series: [{
    name: stateArr.stateTitle,
    data: [...stRounded],
    color: '#002F65',
    custom: {
        state: stateArr.stateTitle
    },
}, {
    name: 'US',
    color: '#0B7070',
        data: [...usRounded],

    dashStyle: "DashDot",

        }],
});

Answer 1

你可以通过使用 "工具提示 "来创建你自己的工具提示。tooltip.formatter.

 tooltip: {
      borderColor: '#2c3e50',
      shared: true,
      formatter: function (tooltip) {
        //u can make your custom tooltip here
        return `<span >${this.y} <br> ${this.x}%</span><br/>`             
      }
    },

这就是一个例子 演示 关于Custome工具提示