工具提示中的 Javascript HighCharts 数学运算

Question

我正在尝试根据从数据库获得的值绘制图表，到目前为止没有任何问题。

现在我想做的是在工具提示上显示另一个信息，它使用一个名为 unitPrice 的常量，并将该常量与 point.y 相乘

tooltip: {
                shared: true,
                useHTML: true,
                headerFormat: '<small>{point.key}</small><table>',
                pointFormat: '<tr><td style="color: {series.color}">{series.name}: </td>' + 
                    '<td style="text-align: right"><b>{point.y} kWh</b></td><td style="text-align: right"><b>'+ (this.y * unitPrice) + '</b></td></tr>', // {series.unit}
                footerFormat: '</table>',

            },

乘法为 NaN，如下所示。

这就是我的意思:

它应该将 11829.68 乘以 0.41(这是 unitPrice 值)，而不是我得到 NaN

我做错了什么？

Answer 1

要使用当前 Point object 访问此你应该使用pointFormatter回调函数(您无法访问 this in pointFormat )。

参见下面的示例:

Highcharts.chart('container', {

    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

    tooltip: {
        pointFormatter: function() { 
          return this.series.name + ' : <b>' + this.y 
                + ' (some math here : ' + this.y * 2.5 + ')</b><br/>'; 
        },
        shared: true
    },

    series: [{
        name: 'dogs',
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }, {
        name: 'cats',
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4].reverse()
    }]

});

<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 300px"></div>