Question

我想在工具提示中添加一个等级，该等级取决于工具提示中的{point.y}。这是我的转换功能：

function getGrade(score)
{
    if(score >= 5-4/6)
        return 'A';
    if(score >= 5-4/6*2)
        return 'B';
    if(score >= 5-4/6*3)
        return 'C';
    if(score >= 5-4/6*4)
        return 'D';
    if(score >= 5-4/6*5)
        return 'E';
    if(score >= 5-4/6*6)
        return 'F';
}

这是我对高图的配置：

$(function () {

    $('#container').highcharts({

        chart: {
            polar: true,
            type: 'line'
        },

        title: {
            text: 'Budget vs spending',
            x: -80
        },

        pane: {
            size: '80%'
        },

        xAxis: {
            categories: ['Sales', 'Marketing', 'Development', 'Customer Support', 
                    'Information Technology', 'Administration'],
            tickmarkPlacement: 'on',
            lineWidth: 0
        },

        yAxis: {
            gridLineInterpolation: 'polygon',
            lineWidth: 0,
            min: 0
        },

        tooltip: {
            shared: true,
            pointFormat: '<span style="color:{series.color}">{series.name}: <b>' + getGrade('{point.y:,.0f}') + '</b> ({point.y:,.0f})<br/>'
        },

        legend: {
            align: 'right',
            verticalAlign: 'top',
            y: 70,
            layout: 'vertical'
        },

        series: [{
            name: 'Allocated Budget',
            data: [1, 1, 2, 3, 4, 5],
            pointPlacement: 'on'
        }, {
            name: 'Actual Spending',
            data: [3, 4, 3, 2, 2, 2],
            pointPlacement: 'on'
        }]

    });
});

这里是整个代码http://jsfiddle.net/A2uvs/

有人有什么不对吗？

提前致谢！

Answer 1

我觉得最好使用tooltip：formatter，因为你可以使用一个函数。看看this小提琴。它可能没有完全按照你想要的格式进行格式化，但我相信我已经把你的大部分时间都放在了那里，剩下的就是造型让你决定，但功能就在那里。

function getGrade(score){
    if(score >= 5-4/6)
        return 'A';
    if(score >= 5-4/6*2)
        return 'B';
    if(score >= 5-4/6*3)
        return 'C';
    if(score >= 5-4/6*4)
        return 'D';
    if(score >= 5-4/6*5)
        return 'E';
    if(score >= 5-4/6*6)
        return 'F';
}

$(function(){
    $('#container').highcharts({
        chart: {
            polar: true,
            type: 'line'
        },      
        title: {
            text: 'Budget vs spending',
            x: -80
        },
        pane: {
            size: '80%'
        },
        xAxis: {
            categories: ['Sales', 'Marketing', 'Development', 'Customer Support', 'Information Technology', 'Administration'],
            tickmarkPlacement: 'on',
            lineWidth: 0
        },
        yAxis: {
            gridLineInterpolation: 'polygon',
            lineWidth: 0,
            min: 0
        },
        tooltip: {
            shared: true,
            formatter: function() {
                var s = '<b>'+ this.x +'</b>';

                $.each(this.points, function(i, point) {
                    var tempcolor = point.series.color;
                    s += '<br/>'+ '<span style="color:'+ tempcolor+'">'+point.series.name +': '+ getGrade(point.y) +'('+point.y+')'+ '</span>';
                });
                return s;
            }
        },
        legend: {
            align: 'right',
            verticalAlign: 'top',
            y: 70,
            layout: 'vertical'
        },
        series: [{
            name: 'Allocated Budget',
            data: [1, 1, 2, 3, 4, 5],
            pointPlacement: 'on'
        }, {
            name: 'Actual Spending',
            data: [3, 4, 3, 2, 2, 2],
            pointPlacement: 'on'
        }]
    });
});

Highchart：将自己的计算添加到工具提示中

1 个答案: