zoukankan      html  css  js  c++  java
  • 非常棒的jqChart图表插件

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

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

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

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

      

    $(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]
                                    ]
                                }
                            ]
                });
            });
    

      

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

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

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

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

  • 相关阅读:
    Encrypted Handshake Message
    RSAParameters Struct
    What if JWT is stolen?
    What's the difference between JWTs and Bearer Token?
    RSA Algorithm Example
    第18届Jolt大奖结果公布
    Ruby on rails开发从头来(windows)(三十六) 调试技巧
    Ruby on rails开发从头来(四十二) ActiveRecord基础(主键和ID)
    YouTube开放基础技术架构 让用户建自家YouTube
    Ruby on rails开发从头来(四十) ActiveRecord基础(Boolean属性)
  • 原文地址:https://www.cnblogs.com/a757956132/p/4556057.html
Copyright © 2011-2022 走看看