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';

...（截短的）...

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

...（截短的）...

在＆＃34;图表下：{＆＃34;等级，我们已经将工具提示定义如下：

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>';
            }

        }

...（截短的）...

Answer 1

事实证明问题非常基本：Tooltip的'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,

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

1 个答案: