非常棒的jqChart图表插件

由于项目需要，做一些类似于OA系统的应用时，表格用到的是最多的，那么图表展示就先显得尤为的重要，其中柱柱状图、折线图、饼状图又居多。

之前一直使用的是Chrome下的googleAPI中提供的chartAPI来进行表格的控制，其中对表格坐标的样式和细节调整做的比较好，但是一个不太好的问题是，很多关于googleAPI的东西需要远程加载，

而google CDN的加载和访问 有时候受到地域等一系列因素会很慢，导致页面报表迟迟无法生成，造成的用户体验下降还是有些明显的。

后来又接触了一下jQuery.plot的一款插件，效果也比较好。

之后就用到了JQChart 大家的反响都不错，数据的生成多样，表格展示也很不错，但是某些情况下不适合大数据量的报表使用，会造成在局部范围内坐标轴 X值的显示错位问题，google很好的解决了这个问题，但是

这款插件目前还无法解决这一问题，但是可以用过添加水平滚动等方式，处理这一类问题，但是本人更倾向于一次性展示出来。

下面就大概的来说一下jqChart插件中的一些options的使用

$(document).ready(function () {
var background = {
type: 'linearGradient',
x0: 0,
y0: 0,
x1: 0,
y1: 1,
colorStops: [{ offset: 0, color: '#d2e6c9' },
{ offset: 1, color: 'white'}]
};
$('#jqChart').jqChart({
title: { text: 'Axis Settings' },//图表标题
border: { strokeStyle: '#6ba851' },//边线颜色
background: background,/*背景渐变色的调整*/
animation: { duration: 1 },//动画效果
/*crosshairs: {
enabled: true, // specifies whether the crosshairs are visible
snapToDataPoints: true, // specifies whether the crosshairs span to data points
hLine: { visible: true, strokeStyle: 'red' }, // horizontal line options
vLine: { visible: true, strokeStyle: 'red' } // vertical line options
},//十字准线样式修改*/
/* paletteColors :{
type: 'default', // default, grayscale, customColors
customColors : undefined
},//t调色板*/
/*legend: {//标注的一些样式修改
title: { margin: 0 }, // legend title
border: {
padding: 2,
strokeStyle: 'grey',
cornerRadius: 6
}, // legend border
font: '12px sans-serif', // item text font
textFillStyle: 'black',  // item text color
textLineWidth: 0, // item text border line width
textStrokeStyle : undefined,  // item text border color
background: undefined, // legend background
margin: 4, // legend margings
visible : true // specifies if the legend is visible
},*/
axes: [/*此处是对轴线的一些优化*/
{
location: 'left',
minimum: 10,
maximum: 700,
interval: 100
}
],
series: [
{
title:"班级排名",
type: 'line',
data: [
['1-1班',  1],
['1-2班',  20],
['1-3班',   60],
['1-4班',  500],
['1-5班',  300],
['1-6班',  200],
['2-1班',  268],
['2-2班',  423],
['2-3班',  321],
['2-4班',  456],
['2-5班',  385],
['2-6班',  578],
['3-1班',  512],
['3-2班',  456],
['3-3班',  478],
['3-4班',  356],
['3-5班',  478],
['3-6班',  189]
]
},
{
title:"排名",
type: 'line',
data: [
['1-1班',  200],
['1-2班',  20],
['1-3班',  160],
['1-4班',  200],
['1-5班',  330],
['1-6班',  20],
['2-1班',  68],
['2-2班',  463],
['2-3班',  321],
['2-4班',  486],
['2-5班',  300],
['2-6班',  508],
['3-1班',  312],
['3-2班',  616],
['3-3班',  178],
['3-4班',  556],
['3-5班',  178],
['3-6班',  489]
]
}
]
});
});

通过这种方式可以制作出精美的图标，图标展示如下图所示，做好的