图表 jschart && amcharts配置应用实例

最新推荐文章于 2019-02-19 15:00:00 发布
jia_xiaoli
最新推荐文章于 2019-02-19 15:00:00 发布
阅读量3k
点赞数
分类专栏： JS-JQUERY-Plugin 文章标签： javascript file csv flash html n2
本文链接：https://blog.csdn.net/jia_xiaoli/article/details/6873233
版权
JS-JQUERY-Plugin 专栏收录该内容
4 篇文章 0 订阅
订阅专栏
最近用到图表工具：
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&lt;br /&gt;你好"里面可以写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>