最近用到图表工具：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>
