如何在我的圖表上懸停時顯示百分比？

Question

狀況：

我期待增加的數字旁邊的工具提示鼠標懸停在圖表當你得到一個百分比。我怎樣才能做到這一點？例如，我想在83.33旁添加一個%符號。

---

ERROR：

ERROR TypeError: Cannot read property '0' of undefined 
at i.label (eval at <anonymous> (http://localhost:3000/js/app/bundle.js:1564:1), <anonymous>:37:63) 

---

CODE：

// Pie 
public pieChartLabels:string[] = []; 
public pieChartData:number[] = []; 
public pieChartType:string = 'pie'; 
public pieChartOptions:any = {}; 

ngOnInit() { 
    var result1 = parseFloat(((this.poll.counter1/(this.poll.counter2+this.poll.counter1))*100).toFixed(2)); 
    var result2 = parseFloat(((this.poll.counter2/(this.poll.counter2+this.poll.counter1))*100).toFixed(2)); 
    this.pieChartData = [result1, result2]; 
    this.pieChartLabels = [this.poll.choice1, this.poll.choice2]; 
    this.pieChartType = 'pie'; 
    this.pieChartOptions = { 
          tooltips: { 
           callbacks: { 
            label: function (tooltipItems, data) { 
              return data.datasets[tooltipItems.datasetIndex].label + ': ' + 
               tooltipItems.pieChartLabels[tooltipItems.datasetIndex].replace(/(\d)(?=(\d{3})+\.)/g, '$1,'); 
              } 
            } 
           } 

          } 

    // events 
public chartClicked(e:any):void { 

} 

public chartHovered(e:any):void { 

} 

Answer 1

您可以使用chart.js中的工具提示回調來更改工具提示後綴。以下是如何添加％的示例。我通過做一些搜索並找到其他例子來破解它。

https://jsfiddle.net/nt50dzb7/

options: { 
    tooltips: { 
     enabled: true, 
     mode: 'single', 
     callbacks: { 
     label: function(tooltipItem, data) { 
      var allData = data.datasets[tooltipItem.datasetIndex].data; 
      var tooltipLabel = data.labels[tooltipItem.index]; 
      var tooltipData = allData[tooltipItem.index]; 
      return tooltipLabel + ": " + tooltipData + "%"; 
     } 
     } 
    } 
    } 
}