Wie kann ich HighCharts 4.2.5 mit boost.js den Tooltip-Formatierer aufrufen?

Question

Wir haben kürzlich versucht, unsere Verwendung von HighCharts von 4.0.4 auf 4.2.5 zu aktualisieren, um das boost.js-Modul für eine bessere Leistung in unseren Streudiagrammen nutzen zu können. Das Problem besteht darin, dass die Tooltips nicht mehr angezeigt werden, wenn wir auf einen der einzelnen Punkte klicken.

Von dem, was wir bisher herausfinden konnten, sieht es so aus, als würde die Formatierungsfunktion in der Tooltipp-Option überhaupt nicht aufgerufen. Wir sind nicht sicher, was das verursacht und waren nicht erfolgreich in unseren Bemühungen, eine Antwort zu finden.

Im Folgenden wird der Code verwendeten wir das Problem auf JSBin (der gleiche Code in this JSBin link ist) zu reproduzieren:

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

... (abgeschnitten) .. .

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

... (abgeschnitten) ...

Unter dem "Diagramm: {" Ebene haben wir den Tooltip wie folgt definiert:

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

     } 

... (abgeschnitten) ...

Answer 1

Es stellt sich heraus, dass das Problem wirklich grundlegend ist: Die Das Attribut 'enabled' für den Tooltip ist falsch, daher ist der Tooltip deaktiviert.

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

Die Lösung besteht darin, dass auf 'true' zu setzen:

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