HTML5学习——jChartFx绘制网页图表

一、jChartFx介绍
http://www.jChartFX.com/Download
二、jChartFx库的导入
把下载得到的压缩包解压后得到jchartfx文件夹，里面一般会有js，styles等文件夹，我们一般可以把整个jchartfx文件夹copy到你的网页工程目录下，eclipse中是Web-Content目录，然后就可以使用了，比如：

<script type="text/javascript"     src="**jchartfx/js/jchartfx.system.js**"></script>
<script type="text/javascript" src="**jchartfx/js/jchartfx.coreVector.js**"></script>
<!-- Uncomment this section to add extended User Interaction capabilities, including the End-User Menu.
     The UI features require a jChartFX Plus license for deployment.
<script type="text/javascript" src="jchartfx/js/jchartfx.userinterface.js"></script>
<link rel="stylesheet" type="text/css" href="jchartfx/js/jchartfx.userinterface.css" />
-->
<link rel="stylesheet" type="text/css" href="jchartfx/js/jchartfx.attributes.css" />
<link rel="stylesheet" type="text/css" href="jchartfx/js/jchartfx.palette.css" />

注意文件路径，相对路径之前没有”/”。jchartfx.system.js和jchartfx.coreVector.js是两个基本的js文件，一般较简单的图表功能都可以实现。

三、jchartfx简单使用
先上代码：（html中有一个id为ChartNormal的div）

var chart1;

function **loadChartNormal**(){
    chart1 = new cfx.Chart();  //得到jchartfx实例
    PopulateProductSales(chart1);  //给chart1设置数据
    chart1.getData().setSeries(3);  //设置图表中“折线“的个数，对应了3组数据
   /*  chart1.getAxisY().setMin(500);
    chart1.getAxisY().setMax(2000); */
    var series1 = chart1.getSeries().getItem(0);
    var series2 = chart1.getSeries().getItem(1);
    var series3 = chart1.getSeries().getItem(2);
    series1.setGallery(cfx.Gallery.Lines)；//第一个设置为折线图
    series2.setGallery(cfx.Gallery.Bar);//第二个为柱状图

    var divHolder = document.getElementById('ChartNormal');    //找到div
    chart1.create(divHolder);          //把图表装入div
}
//为图表设置数据
function **PopulateProductSales**(chart1) {
    var items = [{
        "Month": "Jan",
        "White": 12560,
        "Red": 23400,
        "Sparkling": 34500
    }, {
        "Month": "Feb",
        "White": 13400,
        "Red": 21000,
        "Sparkling": 38900
    }, {
        "Month": "Mar",
        "White": 16700,
        "Red": 17000,
        "Sparkling": 42100
    }, {
        "Month": "Apr",
        "White": 12000,
        "Red": 19020,
        "Sparkling": 43800
    }, {
        "Month": "May",
        "White": 15800,
        "Red": 26500,
        "Sparkling": 37540
    }, {
        "Month": "Jun",
        "White": 9800,
        "Red": 27800,
        "Sparkling": 32580
    }, {
        "Month": "Jul",
        "White": 17800,
        "Red": 29820,
        "Sparkling": 34000
    }, {
        "Month": "Aug",
        "White": 19800,
        "Red": 17800,
        "Sparkling": 38000
    }, {
        "Month": "Sep",
        "White": 23200,
        "Red": 32000,
        "Sparkling": 41300
    }, {
        "Month": "Oct",
        "White": 16700,
        "Red": 26500,
        "Sparkling": 46590
    }, {
        "Month": "Nov",
        "White": 11800,
        "Red": 23000,
        "Sparkling": 48700
    }, {
        "Month": "Dec",
        "White": 13400,
        "Red": 15400,
        "Sparkling": 49100
    }];

    chart1.setDataSource(items);
}