天天看点

jquery -chart 插件canvas

jQuery制作图表之一--线图(使用插件jquery.jqchart.js)的使用总结之一

问题描述:

在这个跨入web2.0的时代,也别说2.0的时代。就跨入现在这个铺天盖地的web系统的年头,什么都流行web化。田我做的是OA系统,大把大

把的系统等着二次开发成web形式。这里有Delphi的,vb的。田是用asp.net开发的,这里一个最大的问题是:图表~!常见的图标有3个:线

图,柱状图,饼图。

今天我尝试写一点关于我制作线图的经验和总结,使用的工具有:

1、jquery.js

2、jquery.jqchart.js 这个是使用到的插件

下载地址:http://jsgt.org/lib/jquery/plugin/jqchart/nightly/nightly.htm官方演示地址

3、excanvas-compressed.js 制作图像必备的canvas插件,可以使用vml数据格式。

图示:

jquery -chart 插件canvas

并且这在FF下也是运行正常的~!

How to do it?

说在前面,一定要引得文件:

1、<!--[if IE]>

<script src="./excanvas-compressed.js" type="text/javascript" ></script>

<![endif]--> 这个是将canvas标签转换为IE认识的vml。ff下是没问题。

2、<script type="text/javascript" src="./jquery.js"></script>

<script type="text/javascript" src="./jquery.jqchart.js"

charset="utf-8"></script>主要是第二个,他里面的那

个$('#canvasMyID').jQchart(jsonobj);是最主要的方法。json对象构建完毕,页面标签写完,就靠这个方法了。

3、<link rel="stylesheet" href="./jqchart-canvasMyID.css" type="text/css">样式文件,以照个人喜好吧,不强求。

这些官网都有下。参见前面的官网。

let's go~~~~

1、一个简单的Demo

它只有两行!!!

<script>部分

$(document).ready(function(){

    var chartSetting={data : [ [435,500,600,700,888,777,925] ]};

});

<html>部分的<body>里

<canvas id="canvasMyID"></canvas>

可以了~!它可以运行了~!

对的,一切都是默认是,显示格式,布局,排版,大小,宽度等,都是默认的。注意,它的数据格式是以数组的方式存在,所以一定要加"[ ]"。

2、我们尝试修改一下默认的显示。

chartSetting其实支持两个值,一个是data,另一个是config;config支持很多的参数设定。包括:

width,height,chartWidth,chartHeight,paddingT,paddingR,scaleYLeft,scaleXBotton,ScaleXTop,titleLeft,titleTop

写法很简单 attribute: value, attribute: value, ......

举个例子:

var chartSetting={

   config : {

      title : "Fucking Java web XY线图<br/ >and There is a &lt;br /&gt;",

       titleLeft: 70,

       labelX : ["X1","X2","X3","X4","X5","X6","X7"],

       scaleY : {min: 0,max:1000,gap:200}

       width: 400, //有影响

       height: 500, //有影响

       paddingL : 50, //有影响

       paddingT : 50 //有影响

   },

     data : [

       [435,500,600,700,888,777,925],

       [50,123,312,200,402,300,512],

       [100,400,790,640,128,347,567]

     ]

   };

关于这些属性的说明,我用一些图来说明

jquery -chart 插件canvas
jquery -chart 插件canvas
jquery -chart 插件canvas

大致上就是这样的情况,相对于任何属性的操作都可以写在config里。这样一个基本的图就完成了。

未完待续。。。。。。下一篇我介绍一下如何写配置属性和属性值,数据是如何动态生成的。

暂定:

1、如何拆分data和config属性,隶属不同的json文件中。而不是txt文件。

2、如何合并data.json和config.json文件,生成线图。

3、如何从一个table中抽离数据生成data,再和config.json合并生成线图。