如何在我的图表上悬停时显示百分比？

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 + "%"; 
     } 
     } 
    } 
    } 
}