在 highchart 中自定义工具提示

Question

我想自定义 HighChart 中的工具提示功能。 我有一个条形图，悬停时工具提示现在只显示一个值，但我想显示三个值。

下面是我的代码：

    $(function () {
        $('#container').highcharts({
            chart: {
                type: 'bar'
            },
            title: {
                text: ''
            },
            subtitle: {

            },
            xAxis: {
                categories: ['Question\'s'],
                title: {
                    text: ''
                }
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Average Scores',

                },
                labels: {
                    overflow: 'justify'
                }
            },
            tooltip: {
                valueSuffix: ''
            },
            plotOptions: {
                bar: {
                    dataLabels: {
                        enabled: true
                    }
                }
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'top',
                x: 10,
                y: -10,
                floating: true,
                borderWidth: 1,
                backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
                shadow: true
            },
            credits: {
                enabled: false
            },
            series: [{
                name: 'My Issue',
                data: [5.4]
// want to add some value here to display
            }, {
                name: 'My Knowledge',
                data: [8.2]
// want to add some value here to display
            }, {
                name: 'My Friendliness',
                data: [7]
// want to add some value here to display
            },
             {
                name: 'My time',
                data: [6]
// want to add some value here to display
            },
            {
                name: 'Z Score',
                data: [9]
// want to add some value here to display
            }
            ]

        });
    });

Js 小提琴：http://jsfiddle.net/bu5fs1Lj/2/

Answer 1

您可以使用chart.tooltip.options.formatter 喜欢：

chart.tooltip.options.formatter = function() {
    var xyArr=[];
    $.each(this.points,function(){
        xyArr.push('Serie: ' + this.series.name + ', ' +'X: ' + this.x + ', Y: ' +this.y);
    });
    return xyArr.join('<br/>');
}

这是fiddle

这里有更多关于formating tooltips的信息

Answer 2

我发现了

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'bar'
        },
        title: {
            text: ''
        },
        subtitle: {

        },
        xAxis: {
            categories: ['Question\'s'],
            title: {
                text: ''
            }
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Average Scores',

            },
            labels: {
                overflow: 'justify'
            }
        },
         tooltip: {formatter: function(){
        return 'The value for <b>' + this.y + '</b><br>Total Survey is <b>' + this.series.options.Credit[this.point.index] + '</b>';
    }

    },
        plotOptions: {
            bar: {
                dataLabels: {
                    enabled: true
                }
            }
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'top',
            x: 10,
            y: -10,
            floating: true,
            borderWidth: 1,
            backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
            shadow: true
        },
        credits: {
            enabled: false
        },
        series: [{
            name: 'My Issue',
            data: [5.4],
            Credit: [21]
        }, {
            name: 'My Knowledge',
            data: [8.2],
            Credit: [22]
        }, {
            name: 'My Friendliness',
            data: [7],
            Credit: [22]
        },
         {
            name: 'My time',
            data: [6],
            Credit: [22]
        },
        {
            name: 'Z Score',
            data: [9],
            Credit: [22],
            Credit: [22]
        }
        ]

    });
});

这里有两个值：http://jsfiddle.net/bu5fs1Lj/3/