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

Java 使用修改条形图动态数据的Highcharts工具提示,java,ajax,json,highcharts,Java,Ajax,Json,Highcharts,我在我的项目中使用highcharts.js,我想做的是格式化我的工具提示。我已经编写了一个java方法,它以json格式将输出返回给我,如下所示 西尔斯特: [{ "value1": "Some Area", "value2": "1", "agrAcronym": "AB" }, { "value1": "Some AREA", "value2": "2", "agrAcronym": "BA" }, {

我在我的项目中使用highcharts.js,我想做的是格式化我的工具提示。我已经编写了一个java方法,它以json格式将输出返回给我,如下所示

西尔斯特:

[{
    "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);

                    });

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

    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
        }]
工具提示:{
分享:是的,
是的,
总部:'',
pointFormat:“{series.name}:”+
“{point.agrocronym}”,
页脚格式:“”
},
系列:[{
资料来源:syList
}]

我已经将我的x轴设置为options2.xAxis.categories[index]=data[“syList”][index][“value1”];默认情况下,它会将value1显示为工具提示,但我想覆盖它并将首字母缩略词“显示为工具提示。您是否尝试将元素作为附加字段推送,然后将其显示在工具提示中?