如何在 PIE Chart-Highcharts 的工具提示中显示附加数据

Question

绑定以在饼图中添加额外的附加数据。我以这种方式尝试过但没有用。该值未显示在工具提示中。那么是否可以在工具提示中添加额外的数据？
chartData=[{"name": "apples", "y": 20,"additionalData": 33$},
{"name": "oranges", "y": 40,"additionalData": 20$},
{"name": "bananas", "y": 50,"additionalData": 10$}]

 Highcharts.chart('chartContainer', {
   chart: {
    // Edit chart spacing
     spacingBottom: 15,
     spacingTop: 10,
     spacingLeft: 0,
     spacingRight: 10,
     width: 600,
     height: 350
   },
   title: {
     text: ''
   },
   xAxis: {
     title: {
       text: null
     }
   },
   yAxis: {
     min: 0,
     title: {
       text: ''
    },
    labels: {
      overflow: 'justify'
    }
  },
  tooltip: {
    pointFormat:'<b>{point.y}<b><br> Cost: <b>{point.additionalData} </b>'
   },
  
   plotOptions: {
     pie: {
       allowPointSelect: true,
         cursor: 'pointer',
       dataLabels: {
         enabled: false
       },
        point:{
         events : {
         legendItemClick: function(e){
             e.preventDefault();
         }
        }
    },

      showInLegend: true
    },
  },
  credits: {
    enabled: false
  },
  series: [{
    colorByPoint: true,
    type: 'pie',
    data:this.chartData
  }]
})
}

Answer 1

您在 additionalData 属性中的值是数字，但它们包含欧元符号，因此您可能希望使用字符串，否则您将无效 json.

[{"name": "apples", "y": 20,"additionalData": "33$"},{"name": "oranges", "y": 40,"additionalData": "20$"},{"name": "bananas", "y": 50,"additionalData": "10$"}]

https://jsfiddle.net/0sacqubp/

如何在 PIE Chart-Highcharts 的工具提示中显示附加数据

How to show additional data in tooltip of PIE Chart-Highcharts

tooltip

highcharts

angular

angular-highcharts