FusionCharts Suite XT是一款基于HTML的javascript图表、仪表控件,支持多种常用的图表类型以及图表功能,不仅可以使用该控件创建常规的图表应用程序,还可以使用控件提供的API对应用中的各种图表元素进行自定义。Tooltip是图表中经常使用到的一个图表元素,当鼠标移动到曲线上的数据点时会弹出相关的信息,该信息可以是数据点的值,也可以是额外的一些相关信息。
为了更好地解释数据点代表的含义,
FusionCharts Suite XT支持可以在提示信息中使用宏来配置提示信息的动态显示,在提示信息宏可以是图表标签、数据值、显示值等变量,也可以是图表中的某一些属性值,通过不同程度的结合可以显示出大量的信息,下面代码讲述了如何在图表提示信息中使用宏
<html>
<head>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
FusionCharts.ready(function(){
var fusioncharts = new FusionCharts({
type: 'column2d',
renderAt: 'chart-container',
id: "myChart",
width: '500',
height: '300',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Harry's SuperMart: Sales Analysis for Top Five Store Locations",
"subCaption": "YTD",
"yAxisName": "Sales (In USD)",
"numberPrefix": "$",
"showValues": "1",
"plotToolText": "Store location: $label <br> Sales (YTD): $dataValue <br> $displayValue",
"theme": "fint"
},
"data": [{
"label": "Bakersfield Central",
"value": "750000",
"displayValue": "Store manager: Victoria"
}, {
"label": "Garden Groove Harbour",
"value": "700000",
"displayValue": "Store manager: Teresa"
}, {
"label": "Los Angeles Topanga",
"value": "690000",
"displayValue": "Store manager: Elvis"
}, {
"label": "Compton-Rancho Dom",
"value": "650000",
"displayValue": "Store manager: Pete"
}, {
"label": "Daly City Serramonte",
"value": "620000",
"displayValue": "Store manager: Reesa"
}]
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
</body>
</html>