FusionCharts Suite XT如何在图表的提示信息Tooltip中使用宏

作者:控件中国网   出处:控件中国网   2016-09-05 10:50:44   阅读:5

FusionCharts Suite XT是一款基于HTML的javascript图表、仪表控件,支持多种常用的图表类型以及图表功能,不仅可以使用该控件创建常规的图表应用程序,还可以使用控件提供的API对应用中的各种图表元素进行自定义。Tooltip是图表中经常使用到的一个图表元素,当鼠标移动到曲线上的数据点时会弹出相关的信息,该信息可以是数据点的值,也可以是额外的一些相关信息。
FusionChart.png
为了更好地解释数据点代表的含义,FusionCharts Suite XT支持可以在提示信息中使用宏来配置提示信息的动态显示,在提示信息宏可以是图表标签、数据值、显示值等变量,也可以是图表中的某一些属性值,通过不同程度的结合可以显示出大量的信息,下面代码讲述了如何在图表提示信息中使用宏
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<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>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>
Copyright© 2006-2015 ComponentCN.com all rights reserved.重庆磐岩科技有限公司(控件中国网) 版权所有 渝ICP备12000264号 法律顾问:元炳律师事务所
客服软件
live chat