柱状图、折线图、饼状图 等图表插件

所属分类:UI-图表

 83785  504  查看评论 (92)
分享到微信朋友圈
X
柱状图、折线图、饼状图 等图表插件 ie兼容10

柱状图、折线图、饼状图 等图表插件,

主要采用两个js,jquery-1.5.2.min 和 highcharts  

在theme中包含四种js是四种颜色样式,defaultSeriesType:为图表类型属性,主要包含8种,分别为 line折线图, spline曲线图, area填充图, areaspline平滑填充图, column柱状图, bar倒柱状图, pie饼状图 , scatter点位图。  

series:属性中加入xml数值即可实现图表


相关插件-图表

百度ets动态添加数据

通过点击不同按钮,进行ajax请求对ets进行数据填充.
  图表
 33379  361

jQuery树状数据转表格插件TreeTable.js

用原生ul以及jquery编写,将树状的json数据,转成表格形式,并可以支持选择。
  图表
 43931  314

类似芝麻信用占比的插件

这是一块款信用占比的插件
  图表
 24000  375

原生js饼图、环形图、环形渐变(原创)

自己开发中使用ets无法实现饼图环形图颜色环形渐变,且目前并未发现有其他插件可以实现,故手写一个,供大家使用,请根据自己实际情况自行修改,欢迎交流。
  图表
 18577  225

讨论这个项目(92)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    『肆月』心微凉 0
    2020/8/12 10:26:30
    大小怎么修改
        西瓜1
        2020/8/12 10:37:45

        直接给div容器加样式就行了

        <div id="container" style="width: 500px;height: 200px"></div>
    回复
    gxymm 0
    2019/8/12 17:02:39
    请问可以将折线图和柱状图在一个图里显示吗 回复
    满天星 0
    2019/8/7 18:46:45
    请问怎么阻止移入显示事件,我把他改为移动端,有个BUG,手指只要移入图表插件,则屏幕不能下滑。 回复
    - 0
    2019/3/12 11:37:21
    怎么修改它图大小,不使用默认的
    回复
    - 0
    2019/3/11 22:22:25
    请问下我的页面加载完了 数据也都正确,点也在,但是线不显示。必须要按下F12线才会出来。这个要怎么搞啊。我有点急,麻烦了!
        -0
        2019/3/11 22:24:48
        或者缩放窗口才出来
        areyouOk0
        2019/3/11 22:45:18
        我这里测试没有遇到你这样的问题。
        -0
        2019/3/12 10:59:05
        页面初始化时 要从后台调数据显示,要怎么写
        W0
        2019/6/3 0:04:46
        你这个 问题怎么解决的我也有这个问题
        ASmallFirm丶0
        2020/5/6 10:17:42
        我也有这个问题
    回复
    高山清风 0
    2018/8/4 18:18:09

    发现一个问题,  【JQuery饼状图演示】 中,那个鼠标移动到提示内容上,提示的信息不正确。

    tooltip: {
            enabled: true,
            formatter: function() {
                return '' + this.x + this.name + ': ' + Highcharts.numberFormat(this.y, 1) + "%";
            }
    },

    this.x 和 this.name 都没有显示出标题来

        ASmallFirm丶1
        2020/5/6 9:39:22
        this.name 改成 this.point.name
    回复
    Queen 0
    2018/7/17 16:54:10
    请问下载了是否可用?
        AXin_0
        2018/7/30 11:28:36
        下载下来了吗
        就这样吧。0
        2018/8/16 9:29:31
        我想要点 jq币
        晨星0
        2018/12/8 12:05:21
        用JQUERY 3.21版本的话,渲染后线条不显示,需要调整浏览器窗口大小后才显示,正在寻找解决办法
    回复
    请叫我老曹?? 0
    2018/6/8 0:08:00
    哪位好心哥们下载了。这边提供一下。
        AXin_0
        2018/7/30 11:41:19
        +1

    回复
    DEMON 0
    2018/6/5 13:01:38

    老哥,为什么我压缩成指定data只赋值中间一位,比如“一月份北京”上传的是304,结果只显示0
    我的压缩格式

    Map map1 = new HashMap();  
           map1.put("name", "两厢轿车");
           map1.put("data", sales1.toArray());
           
           Map map2 = new HashMap();  
           map2.put("name", "三厢轿车");
           map2.put("data", sales2.toArray());
           
           Map map3 = new HashMap();  
           map3.put("name", "跑车");
           map3.put("data", sales3.toArray());
           
           Map map4 = new HashMap();  
           map4.put("name", "SUV");
           map4.put("data", sales4.toArray());
           
           Map map5 = new HashMap();  
           map5.put("name", "MPV");
           map5.put("data", sales5.toArray());
           
           List<Map> data = new ArrayList<Map>();
           data.add(map1);
           data.add(map2);
           data.add(map3);
           data.add(map4);
           data.add(map5);
           
           JSONArray jsonObject = JSONArray.fromObject(data); 
           System.out.println("admin_imgup.java中data:" + jsonObject);
           String result = jsonObject.toString();
           PrintWriter out = response.getWriter();
           out.print(result);
        DEMON0
        2018/6/5 13:04:14

        控制台输出也没问题

        [{
            "name": "两厢轿车",
            "data": ["500", "420", "330", "420", "544", "525", "344", "265", "233", "183", "96", "139"]
        }, {
            "name": "三厢轿车",
            "data": ["40", "29", "55", "245", "184", "115", "352", "365", "233", "383", "239", "36"]
        }, {
            "name": "跑车",
            "data": ["140", "129", "155", "145", "284", "215", "152", "165", "133", "283", "136", "189"]
        }, {
            "name": "SUV",
            "data": ["39", "42", "57", "85", "119", "152", "170", "166", "142", "103", "66", "48"]
        }, {
            "name": "MPV",
            "data": ["44", "272", "257", "285", "119", "152", "270", "366", "342", "303", "366", "481"]
        }]
        DEMON0
        2018/6/5 13:05:52

        但是显示到前台总是变成 比如上边的

        ["500","420","330","420","544","525","344","265","233","183","96","139"]

        就显示成

        ["0","2","3","2","4","2","4","6","3","8","9","3"]

        的效果

        请叫我老曹??0
        2018/6/8 0:08:45
        这边能否打包一下代码。
    回复
    sunshine. 0
    2018/5/30 17:12:56
    请问怎么增加X轴的数字呀,我要变成每月1号到3号的
        sunshine.0
        2018/5/30 17:27:39
        我知道怎么搞了
        楔子?0
        2018/6/2 16:35:46
        能不能把这个插件分享一下给我呢
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复