使用修改条形图动态数据的Highcharts工具提示

Question

我正在为我的项目使用highcharts.js我想做的是格式化我的工具提示。我写了一个java方法，它以json格式将输出作为返回给我

syList:

[{
    "value1": "Some Area",
        "value2": "1",
        "agrAcronym": "AB"
}, {
    "value1": "Some AREA",
        "value2": "2",
        "agrAcronym": "BA"
}, {
    "value1": "Some Area",
        "value2": "3",
        "agrAcronym": "NA"
}, {
    "value1": "Some Area",
        "value2": "4",
        "agrAcronym": "MW"
}, {
    "value1": "Some Area",
        "value2": "5",
        "agrAcronym": "PW"
}, {
    "value1": "Some Area",
        "value2": "6",
        "agrAcronym": "NP"
}, {
    "value1": "Some Area",
        "value2": "7",
        "agrAcronym": "SP"
}, {
    "value1": "Some Area",
        "value2": "8",
        "agrAcronym": "MS"
}, {
    "value1": "Some Area",
        "value2": "9",
        "agrAcronym": "SA"
}],

我的图表脚本是

var options2 = {
        chart : {
            renderTo : 'outgoingContainer',
            type : 'column',
            marginTop: 50,
        },
        title : {
            text : 'Something Area',
            style: {
                color : '#2B1B17',
                fontWeight: 'bold'
            }
        },
        xAxis : {
            title : {
                text : null
            },
            labels: {
                y: 30,
            }
        },
        yAxis : {
            title : {
                text : 'something',
                align : 'middle'
            },
            stackLabels : {
                enabled : true,
                style : {
                    fontWeight : 'bold',
                    color : (Highcharts.theme && Highcharts.theme.textColor)
                            || 'charcoal'
                },
                formatter : function() {
                    return getCurrencyFormat(parseInt(this.total));
                }
            }
        },
        tooltip : {
            formatter : function() {
                return '' + this.x + ': ' + getCurrencyFormat(parseInt(this.y));
            }
        },
        plotOptions : {
            series: {
                borderWidth: 1,
                borderColor: 'black'
            },
            column : {
                stacking : 'normal',
                dataLabels : {
                    enabled : false,
                    color : (Highcharts.theme && Highcharts.theme.dataLabelsColor)
                            || 'black',
                    style : {
                        fontWeight : 'bold',
                    }
                }
            }
        },
        legend : {
            enabled : false
        },
        credits : {
            enabled : false
        },
        series : [ {
            color : '#00FFFF',
        } ]
    };

            $.getJSON(
                   function(data) {
                        options2.xAxis.categories   = [];
                        options2.series[0].data = [];
                        if (data["syList"] != null) 
                        {
                            $.each(data["syList"], function( index, value ) {
                                options2.xAxis.categories[index]    = data["syList"][index] ["value1"];
                                options2.series[0].data[index]      = parseFloat(data["syList"][index]["value2"]);
                                });
                            $("#outgoingContainer").show();
                        } else {
                            options2.yAxis.title.text = "";
                            $("#outgoingContainer").hide();
                        }

                        new Highcharts.Chart(options2);
                    });

Answer 1

您需要在工具提示上设置useHtml=true，这将允许您以任何方式格式化工具提示。确保系列的数据设置为syList，并在工具提示上设置headerFormat、pointFormat和footerFormat，如下所示。注意{point.agrAcronym}.

    tooltip: {
            shared: true,
            useHTML: true,
            headerFormat: '<table>',
            pointFormat: '<tr><td style="color: {series.color};">{series.name}: </td>' +
                '<td>{point.agrAcronym}</td></tr>',
            footerFormat: '</table>'
        },
        series: [{
            data: syList
        }]