javascript - 如何使用 boost.js 使 HighCharts 4.2.5 调用工具提示格式化程序？

Question

我们最近尝试将 HighCharts 的使用从 4.0.4 更新到 4.2.5，以便利用其 boost.js 模块来提高散点图的性能。我们遇到的问题是，当我们单击任何单个点时，工具提示不再显示。

从目前我们了解到的情况来看，工具提示选项中的格式化函数似乎根本没有被调用。我们不确定是什么原因造成的，并且未能成功找到答案。

下面是我们用来在 JSBin 上重现问题的代码(相同的代码位于 this JSBin link ):

var data = [{
"cid": 63113,
"cn": "P 889-189956-01",
"an": "DOE, JAMES",
"ct": 95,
"prb": 28.9,
"prd": 1263,
"cln": "DOE, JOHN R",
"d": "condition 1",
"dt": 721976400000,
"ac": "BIG CORP",
"j": "WV",
"ia": 0,
"wac": null,
"actualPerc": 7.521773555027711
}, {
"cid": 68066,
"cn": "P 889-200629-01",
"an": "DOE, JAMES",
"ct": 3656.0916,
"prb": 32.9,
"prd": 1283,
"cln": "claimant1",
"d": "condition 1",
"dt": 728024400000,
"ac": "BIG CORP",
"j": null,
"ia": 1,
"wac": null,
"actualPerc": 284.96427123928294
}, {
"cid": 129977,
"cn": "P 033-145468-01",
"an": "DOE, JAMES",
"ct": 152,
"prb": 42.3,
"prd": 1737,
"cln": "cln2",
"d": "condition 1",
"dt": 754549200000,
"ac": "BIG CORP",
"j": null,
"ia": 1,
"wac": null,
"actualPerc": 8.750719631548646
}];

var chartdata = [];

...

$(function() {

drawChart(data, "settlement", "settlement-chart", "settlement");
drawChart(data, "tracking", "tracking-chart", "tracking");

function drawChart(data, type, containerId) {
    var chart, watchlistClaimsIDs,
        defaultClaimColorString = 'rgba(158, 196, 229, 1)',
        baseChartColor = '#fff',
        axisLabelColorString = '#526e97';

...( chop )...

myChart = new Highcharts.Chart({
    chart: {
            renderTo: containerId,
            type: 'scatter',

...( chop )...

在“chart: {”级别下，我们定义了工具提示如下:

tooltip: {
            useHTML: true,
            enabled: false,
            animation: false,
            backgroundColor: baseChartColor,
            borderColor: baseChartColor,

            formatter: function() {
                console.log("tooltip");
                var lookupClaims = {};
                var erQuadrant = Math.floor((Math.random() * 4) + 1),
                    acQuadrant = Math.floor((Math.random() * 6) + 1),
                    xVal = this.point.x,
                    claim = lookupClaims[this.point.id];
                var selectedUser = "none";
                if (this.point.x >= 1000 && this.point.x < 1000000) {
                    xVal = (this.point.x / 1000).toFixed(0) + 'K';
                } else if (this.point.x >= 1000000) {
                    xVal = (this.point.x / 1000).toFixed(0) + 'M';
                }

                return '<div class="chart-tooltip">' +
                    '<h6>CLAIM NUMBER</h6>' +
                    '<span>' + claim.cn + '</span>' +
                    '<h6>ACCOUNT</h6>' +
                    '<span>' + claim.ac + '</span>' +
                    '<h6>CLAIMANT</h6>' +
                    '<span>' + claim.cln + '</span>' +
                    '<div><span>' + yAxisLabel.toUpperCase() + '</span><span>' + (type === 'settlement' ? this.point.y.toFixed(1) : claim.actualPerc.toFixed(1)) + '%</span></div>' +
                    '<div><span>EST. LEGAL SPEND</span><span>$' + xVal + '</span></div>' +
                    (!!selectedUser ? ('<a href="#/ecs/claim/' + this.point.id + '/' + ((type === 'tracking') ? 'ac' : 'er') + '/' + btoa(erQuadrant + '~' + acQuadrant) + '">See more</a>') : '') + '</div>';
            }

        }

...( chop )...

Answer 1

事实证明，问题非常基本:工具提示的“enabled”属性为 false，因此工具提示被禁用。

tooltip: {
        useHTML: true,
        enabled: false, // tooltip is disabled
        animation: false,
        backgroundColor: baseChartColor,
        borderColor: baseChartColor,

解决方案是将其设置为“true”:

tooltip: {
        useHTML: true,
        enabled: true, // tooltip is enabled
        animation: false,
        backgroundColor: baseChartColor,
        borderColor: baseChartColor,