由于项目需要，做一些类似于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] ] } ] }); });
通过这种方式可以制作出精美的图标，图标展示如下图所示，做好的
