FusionCharts XT如何为图表添加趋势线并进行设置

作者:控件中国网   出处:控件中国网   2016-08-22 11:09:14   阅读:11

FusionCharts XT是一款基于HTML下的强大的JavaScript图表类控件,控件不仅提供了多种图表类型,而且还提供了很多图表领域经常使用的工具,其中趋势线是经常使用到的一种图表工具,趋势线一般分为垂直趋势线和水印趋势线,利用趋势线可以更好地对图表中的数据进行解释,开发人员可以使用趋势线来定义某些限制或者是一些目标,列如,绘制一个公司的季度销售额图表时,可以使用趋势线来定制季度销售目标,通过图表可以直观显示出哪些季度达到了季度销售目标。
FusionChart.png
开发人员使用FusionCharts 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: '550',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Monthly revenue for the last year",
            "subCaption": "Harry's SuperMart",
            "xAxisName": "Month",
            "yAxisName": "Revenue",
            "numberPrefix": "$",
            "theme": "fint",
            "trendValueFontBold": "1",
            "trendValueBorderColor": "#123456",
            "trendValueBorderDashed": "1",
            "trendValueBorderDashlen": "2",
            "trendValueBorderDashGap": "3",
            "trendValueBorderThickness": "3"
        },
        "data": [{
            "label": "Jan",
            "value": "420000"
        }, {
            "label": "Feb",
            "value": "810000"
        }, {
            "label": "Mar",
            "value": "720000"
        }, {
            "label": "Apr",
            "value": "550000"
        }, {
            "label": "May",
            "value": "910000"
        }, {
            "label": "Jun",
            "value": "510000"
        }, {
            "label": "Jul",
            "value": "680000"
        }, {
            "label": "Aug",
            "value": "620000"
        }, {
            "label": "Sep",
            "value": "610000"
        }, {
            "label": "Oct",
            "value": "490000"
        }, {
            "label": "Nov",
            "value": "900000"
        }, {
            "label": "Dec",
            "value": "730000"
        }],
        "trendlines": [{
            "line": [{
                "startvalue": "700000",
                "color": "#1aaf5d",
                "valueOnRight": "1",
                "displayvalue": "Monthly Target"
            }]
        }]
    }
}
);
    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