如何使用高圖在工具提示中顯示多個數組？

Question

我要在我的項目中繪製圖表，並且我被用於繪製高圖表。並且我正在爲節目表動態獲得成功。而且我有3個陣列。第一個數組存儲Dates.2nd數組存儲追隨者數，第三個數組存儲字符串。所以我想在工具提示中的第三個數組。現在在工具提示節目中，現在我只想追隨者計數，我也想顯示第三個數組數據。那麼怎麼能做到這一點，那麼請告訴我。這裏下面我已經列出我的代碼與屏幕截圖任何一個知道，然後請幫助我。

這是我的數組=>

var Dates = []; 
"11-10-2017" 
"12-10-2017" 
"13-10-2017" 
"14-10-2017" 
"15-10-2017" 
"16-10-2017" 
"17-10-2017" 

var FollowersCount = []; 
    "0" 
    "0" 
    "0" 
    "0" 
    "50" 
    "10" 
    "0" 

var Activites = []; 
    "" 
    "" 
    "" 
    "" 
    "Comment,LIke" 
    "Like" 
    "0" 

我想表明的只是提示該第三陣列。

這是我的代碼=>

*Highcharts.chart('container', { 
    xAxis: { 
     categories: Dates 
    }, 
    credits: { 
     enabled: false 
    }, 
    exporting: { 
     chartOptions: { // specific options for the exported image 
      plotOptions: { 
       series: { 
        dataLabels: { 
         enabled: true 
        } 
       } 
      } 
     }, 
     sourceWidth: 400, 
     sourceHeight: 300, 
     scale: 1, 
     buttons: { 
      customButton: { 
       text: 'Next Dates', 
       onclick: function() { 
        alert('You pressed the button!'); 
       } 
      }, 
      anotherButton: { 
       text: 'Previous Dates', 
       onclick: function() { 
        alert('You pressed another button!'); 
       } 
      } 
     } 
    }, 
    plotOptions: { 
     line: { 
      dataLabels: { 
       enabled: true 
      }, 
      enableMouseTracking: false 
     } 
    }, 
    title: { 
     text: "Followers" 
    }, 
    series: [{ 
     name: 'Followers', 
     data: FollowersCount 
    } 
    ] 
});* 

這是我的圖表屏幕截圖=>

Answer 1

一個這樣做的方式是，通過添加額外的數據到每個點，在你的情況，爲每個數據點添加活動。然後用格式化工具在工具提示中顯示它們。我做了一個例子：

首先製作一個新的數組含有你的價值和活動：

var processedData = []; 
for (var i = 0; i < FollowersCount.length; i++) { 
    processedData.push({ 
    y: FollowersCount[i], 
    activity: Activites[i] 
    }) 
} 

其設爲您的數據：

series: [{ 
    name: 'Followers', 
    data: processedData 
}] 

然後創建一個工具提示中顯示此活動，但只有當它存在時：

tooltip: { 
    formatter: function() { 
    let tmpTooltip = '<b>' + this.point.category + '</b><br/><span style="color:' + this.point.color + '">\u25CF</span> ' + this.series.name + ': <b>' + this.point.y + '</b>'; 
    if (this.point.activity != "") { 
     return tmpTooltip + '<br/><b>Activity:</b>' + this.point.activity; 
    } else { 
     return tmpTooltip; 
    } 
    } 
} 

最後你有一張圖，看起來像th是：

工作示例：http://jsfiddle.net/ewolden/cujmdg85/2/

API上提示格式化：http://api.highcharts.com/highcharts/tooltip.formatter