最近用到图表工具: jschart,轻量级,入门很快,不过可配置性小不够强,而且实际配张图挺麻烦的,有些特殊需求也满足不了; 最后选了amchart,配置稍微要学下,支持flash/js,踉跄上马了; jschart下面是一段jschart实例(官网,demo很全面):
<html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>JSChart</title> <script type="text/javascript" src="../../../sources/jscharts.js"></script> </head> <body> <div id="graph">Loading...</div> <script type="text/javascript"> var myChart = new JSChart('graph', 'line'); myChart.setDataArray([[1, 80],[2, 40],[3, 60],[4, 65],[5, 50],[6, 50],[7, 60],[8, 80],[9, 150],[10, 100]], 'blue'); myChart.setDataArray([[1, 100],[2, 55],[3, 80],[4, 115],[5, 80],[6, 70],[7, 30],[8, 130],[9, 160],[10, 170]], 'green'); myChart.setDataArray([[1, 150],[2, 25],[3, 100],[4, 80],[5, 20],[6, 65],[7, 0],[8, 155],[9, 190],[10, 200]], 'gray'); /*x,y,color*/ myChart.setSize(550, 300); myChart.setAxisValuesNumberY(5); myChart.setIntervalStartY(0); myChart.setIntervalEndY(200); myChart.setLabelX([2,'p1']);/*下标*/ myChart.setLabelX([4,'p2']); myChart.setLabelX([6,'p3']); myChart.setLabelX([8,'p4']); myChart.setLabelX([10,'p5']); myChart.setAxisValuesNumberX(5); myChart.setShowXValues(false); myChart.setTitleColor('#454545'); myChart.setAxisValuesColor('#454545'); myChart.setLineColor('#A4D314', 'green'); myChart.setLineColor('#BBBBBB', 'gray'); myChart.setTooltip([1,' ']);/*各点是否画圈圈*/ myChart.setTooltip([2,' ']); myChart.setTooltip([3,' ']); myChart.setTooltip([4,' ']); myChart.setTooltip([5,' ']); myChart.setTooltip([6,' ']); myChart.setTooltip([7,' ']); myChart.setTooltip([8,' ']); myChart.setTooltip([9,' ']); myChart.setTooltip([10,' ']); myChart.setFlagColor('#9D16FC'); myChart.setFlagRadius(4); myChart.setAxisPaddingRight(100); myChart.setLegendShow(true); myChart.setLegendPosition(490, 80); myChart.setLegendForLine('blue', 'Click me'); myChart.setLegendForLine('green', 'Click me'); myChart.setLegendForLine('gray', 'Click me'); myChart.draw(); </script> </body> </html>
amcharts
这个是我配置出来的一组:具体配置请看官方文档<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>amCharts Example</title> </head> <body style="background-color:#EEEEEE"> <!-- saved from url=(0013)about:internet --> <!-- amcharts script--> <!-- swf object (version 2.2) is used to detect if flash is installed and include swf in the page --> <script type="text/javascript" src="amcharts/flash/swfobject.js"></script> <!-- following scripts required for JavaScript version. The order is important! --> <script type="text/javascript" src="amcharts/javascript/amcharts.js"></script> <script type="text/javascript" src="amcharts/javascript/amfallback.js"></script> <script type="text/javascript" src="amcharts/javascript/raphael.js"></script> <!-- chart is placed in this div. if you have more than one chart on a page, give unique id for each div --> <div id="chartdiv"></div> <script type="text/javascript"> var params = { bgcolor:"#FFFFFF" }; var flashVars = { path: "../../amcharts/flash/", /*1外部参数文件和配置文件*/ //settings_file: "line_settings.xml", //data_file: "line_data.xml" /*2内置参数和配置*/ chart_data: "1111;1;1\n33.5;3;\n4444;4;\n2222;;2\n1111;;1\n33.5;6;3\n4444;6;4\n2222;9;2\n1111;1;1\n33.5;3;\n4444;4;\n2222;10;2\n1111;1;1\n33.5;6;3\n4444;6;4\n2222;9;2\n", chart_settings: "<settings><data_type>csv</data_type><connect>true</connect><grid><x><approx_count>8</approx_count></x> <y_left><alpha>10</alpha></y_left></grid><values><x><rotate>30</rotate></x></values><graphs><graph gid='0'><title>计划</title><color>#FFCC00</color><bullet>round</bullet><bullet_size>5</bullet_size></graph><graph gid='1'><title>实际</title><color>FF0F00</color><bullet>round</bullet><bullet_size>5</bullet_size></graph></graphs></settings>" /*支持xml和csv格式的数据,数据和配置可以是外部文件file,也可以是chart内容*/ /*简介:使用csv格式的数据,数据断点是否用连线,x轴有8个网格,左y轴网格数10,x下标数据30度倾斜,gid=0数据线“计划”颜色为#FFCC00数据处采用大小为5的点状标注,gid=1...*/ }; if (swfobject.hasFlashPlayerVersion("8")) {/*检查浏览器,是否可用flash,否则用javascript*/ swfobject.embedSWF("amcharts/flash/amline.swf", "chartdiv", "600", "400", "8.0.0", "amcharts/flash/expressInstall.swf", flashVars, params); } else { var amFallback = new AmCharts.AmFallback(); //amFallback.settingsFile = flashVars.settings_file; /*1外部参数文件和配置文件*/ // doesn't support multiple settings files or additional_chart_settins as flash does //amFallback.dataFile = flashVars.data_file; amFallback.chartSettings = flashVars.chart_settings; /*2内置参数和配置*/ amFallback.chartData = flashVars.chart_data; //amFallback.pathToImages = "../../amcharts/javascript/images/";/*没发现作用*/ amFallback.type = "line"; amFallback.write("chartdiv");/*显示的div*/ } </script> </body> </html>
效果还不错,存在的缺陷:注意x轴,是不是很傻,写啥就显示啥而且平均分布(这一点jschart比较智能点)。没办法,要在data上动脑子,把x轴的每一天补齐<value xid='1309449600'>2011-07-01</value><value xid='1309536000'>2011-07-02</value>..... 默认每个节点显示value值,为了显示自定义内容可用description字段(description="hello<br />你好"里面可以写html语句,但是有的时候又失败,大概跟字符的转义有关吧);
<script type="text/javascript"> var params = { bgcolor:"#FFFFFF" }; var flashVars = { path: "amcharts/flash/", chart_data:"<chart><series><value xid='1309449600'>2011-07-01</value><value xid='1309536000'>2011-07-02</value><value xid='1309622400'>2011-07-03</value><value xid='1309708800'>2011-07-04</value><value xid='1309795200'>2011-07-05</value><value xid='1309881600'>2011-07-06</value><value xid='1309968000'>2011-07-07</value><value xid='1310054400'>2011-07-08</value><value xid='1310140800'>2011-07-09</value><value xid='1310227200'>2011-07-10</value><value xid='1310313600'>2011-07-11</value><value xid='1310400000'>2011-07-12</value><value xid='1310486400'>2011-07-13</value><value xid='1310572800'>2011-07-14</value><value xid='1310659200'>2011-07-15</value><value xid='1310745600'>2011-07-16</value><value xid='1310832000'>2011-07-17</value><value xid='1310918400'>2011-07-18</value><value xid='1311004800'>2011-07-19</value><value xid='1311091200'>2011-07-20</value><value xid='1311177600'>2011-07-21</value><value xid='1311264000'>2011-07-22</value><value xid='1311350400'>2011-07-23</value><value xid='1311436800'>2011-07-24</value><value xid='1311523200'>2011-07-25</value><value xid='1311609600'>2011-07-26</value><value xid='1311696000'>2011-07-27</value><value xid='1311782400'>2011-07-28</value><value xid='1311868800'>2011-07-29</value><value xid='1311955200'>2011-07-30</value></series><graphs><graph gid='0'><value xid='1309449600'>200</value><value xid='1309536000'>200</value><value xid='1309622400'>200</value><value xid='1309708800'>200</value><value xid='1309795200'>200</value><value xid='1309881600'>200</value><value xid='1309968000'>200</value><value xid='1310054400'>280</value><value xid='1310140800'>280</value><value xid='1310227200'>280</value><value xid='1310313600'>280</value><value xid='1310400000'>280</value><value xid='1310486400'>280</value><value xid='1310572800'>280</value><value xid='1310659200'>280</value><value xid='1310745600'>280</value><value xid='1310832000'>280</value><value xid='1310918400'>280</value><value xid='1311004800'>280</value><value xid='1311091200'>280</value><value xid='1311177600'>280</value><value xid='1311264000'>280</value><value xid='1311350400'>280</value><value xid='1311436800'>280</value><value xid='1311523200'>280</value><value xid='1311609600'>280</value><value xid='1311696000'>280</value><value xid='1311782400'>280</value><value xid='1311868800'>280</value></graph><graph gid='1'><value xid='1310400000'>130.8</value><value xid='1311004800'>137.9</value><value xid='1311609600'>148.2</value></graph><graph gid='2'><value xid='1309881600' description='hello,你好' >0</value><value xid='1310486400' >0</value><value xid='1314115200' >0</value></graph></graphs></chart>", chart_settings: "<settings><data_type>xml</data_type><connect>true</connect><decimals_separator>.</decimals_separator><link_target>_blank</link_target><indicator><zoomable></zoomable></indicator><grid><x><approx_count>8</approx_count></x><y_left><alpha>10</alpha></y_left></grid><balloon><text_size>13</text_size></balloon><values><x><rotate>30</rotate></x></values><graphs><graph gid='0'><title>计划</title><color>#483D8B</color></graph><graph gid='1'><title>实际</title><color>#556B2F</color><bullet>round</bullet><bullet_size>8</bullet_size></graph><graph gid='2'><title>上线节点</title><color>#FF0000</color><bullet>square_outlined</bullet><bullet_size>8</bullet_size><balloon_text><![CDATA[{description}]]></balloon_text></graph></graphs></settings>" /*采用xml格式的数据,点之间connect起来,小数点为.,url采用_blank打开,ballon提示文本的大小13,x坐标倾斜30度,grap0颜色为蓝色,grap1的数据点为8号的圆点,grap2数据点为8号的方块,ballon中显示description内容*/ }; // change 8 to 80 to test javascript version if (swfobject.hasFlashPlayerVersion("8")) { swfobject.embedSWF("amcharts/flash/amline.swf", "chartdiv", "600", "400", "8.0.0", "amcharts/flash/expressInstall.swf", flashVars, params); } </script>
图表 jschart && amcharts配置应用实例
最新推荐文章于 2019-02-19 15:00:00 发布