如何使boost.js調用工具提示格式化程序來讓HighCharts 4.2.5？

我們最近試圖將我們對HighCharts的使用從4.0.4更新到4.2.5，以便利用boost.js模塊來改進散點圖中的性能。我們遇到的問題是，當我們點擊任何單個點時，工具提示不再顯示。如何使boost.js調用工具提示格式化程序來讓HighCharts 4.2.5？

從迄今爲止我們已經弄清楚的情況來看，它看起來好像工具提示選項中的格式化程序功能根本沒有被調用。我們不確定是什麼原因造成的，並且在我們努力尋找答案方面沒有取得成功。

下面是我們用來重現上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',

...（截）...

在「圖表：{」的水平，我們定義如下的提示：

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

     }

...（截）...

來源

2016-08-04 user15299

我精縮演示在這裏你可以看到，工具提示（帶格式）效果很好：http://jsfiddle.net/n6e1Lbu6/ 。 –

事實證明，這個問題確實是鹼性的：工具提示的'enabled'屬性爲false，因此工具提示被禁用。

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

解決的辦法是：被設置爲「真」：

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

來源

2016-08-09 17:32:57 user15299

如何使boost.js調用工具提示格式化程序來讓HighCharts 4.2.5？

回答

相關問題