Java 使用修改条形图动态数据的Highcharts工具提示
我在我的项目中使用highcharts.js,我想做的是格式化我的工具提示。我已经编写了一个java方法,它以json格式将输出返回给我,如下所示 西尔斯特: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" }, {
[{
"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显示为工具提示,但我想覆盖它并将首字母缩略词“显示为工具提示。您是否尝试将元素作为附加字段推送,然后将其显示在工具提示中?