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

来源：互联网发布：mac上删除应用程序编辑：程序博客网时间：2024/06/05 00:16

一、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);}

0 0