如何使用jQuery highcharts更改工具提示

Question

我正在尝试让我的工具提示显示y值，而不是它们当前所占的百分比。 例如，将鼠标悬停在Yellow ，工具提示将显示22.6% 。 它应该改为阅读91.5黄色吃喝玩乐。

$(function () {
    $('#container').highcharts({
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
        },
        title: { text: 'Skittles By Color' },
        subtitle: { text: '15.4 oz (437 g) Bag' },
        tooltip: { pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                    style: { color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black' },
                    connectorColor: 'silver'
                }
            }
        },
        series: [{
            type: 'pie',
            name: 'Color %',
            data: [
                { name: 'Green', y: 64, sliced: true, selected: true, color: '#00ff00'}, 
                { name: 'Purple', y: 71, color: '#660066' },
                { name: 'Red', y: 88.0, color: '#dd0000' },
                { name: 'Orange', y: 91, color: '#ff6600' },
                { name: 'Yellow', y: 91.5, color: '#ffff00' }
            ]
        }]
    });
});

jsfiddle

Answer 1

您在代码中看到tooltip部分了吗？ 这就是您需要更改的内容：

pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'

...应该...

pointFormat: '<b>{point.y} skittles</b>'

如此处所示： http : //jsfiddle.net/jpotLvt7/11/ 。

将来当您遇到此类问题时，建议您在代码中查找是否有与您的问题相关的名称。 在这种情况下，找到它并不难。 您想要更改工具提示文本，并且代码中有一个tooltip { ... }部分。