关闭

highcharts中从后台获取数据并添加

2833人阅读 评论(0) 收藏 举报

看了很多文章,但是最后还是没讲解明白,但是还是获得一点提示,最后终于添加成功了,尽量详细(本图为多组柱状图)

首先看一下代码:

Data.ajaxGetCall("/admin/report/userAction?",function(data){//后台请求数据X轴为时间,Y轴分别有评论数,收藏数//Data.ajaxGetCall();为自己封装的方法,
                var timeData = data.timeData;
                var comment = data.comment;
                var favor = data.favor;
                $('#container2').highcharts({
                    chart: {
                        type: 'column'
                    },
                    title: {
                        text: '用户行为',
                        x: -20
                    },
                    subtitle: {
                        text: 'Source: www.baidu.com',
                        x: -20
                    },
                    xAxis: {
                        categories: [timeData.seven, timeData.six, timeData.five, timeData.four, timeData.third, timeData.last,timeData.now]//后台请求的时间数据直接放到这可以显示//也可以直接封装成函数
                    },
                    yAxis: {
                        title: {
                            text: 'User Action'
                        },
                        min:0, //Y显示最小值
                        tickInterval: 1, //步长
                        max:10,//最大

                        //如果去掉min,tickInterval,max三个字段,那么highcharts就会自动设置这三个值

                        plotLines: [{
                            value: 0,
                            width: 1,
                            color: '#808080'
                        }]
                    },
                    tooltip: {
                        valueSuffix: ''
                    },
                    legend: {
                        layout: 'vertical',
                        align: 'right',
                        verticalAlign: 'middle',
                        borderWidth: 0
                    },
                    series: [{
                        name: '评论',
                        data: userAct(comment)
                    }, {
                        name: '收藏',
                        data: userAct(favor)
                    }]
                });
                function userAct(arr){
                    var data = new Array();

                    var length = arr.length;
                    for(var i=0;i<length;i++){
                        data[i] = parseInt(arr[i]);
                    }
                    return data;
                }
            });

在开始放数据的时候在X轴直接放后台查出数据就行,而放Y轴数据是老是不显示,查了很多文章终于知道一点data中的数据最好是整形,用函数parseInt(),完全可以正常显示(本人js很弱),后台返回数据是数值字符串,必须用parseInt转换后才能显示,于是写了个函数遍历转换数值然后形成新数组然后再塞回去;再次查看柱状图就有了(总体来说方法很笨)

0
2
查看评论

使用 HighCharts 动态获取后台数据生成图表

使用 highcharts 动态获取后台数据生成图表的 demo
  • creatorYC
  • creatorYC
  • 2015-11-29 22:26
  • 6415

关于highcharts动态获取数据做报表

首先,这是我第一次写博客。
  • w532250318
  • w532250318
  • 2014-11-04 09:50
  • 2829

highcharts动态获得后台数据数据

highcharts动态获得后台数据数据 highcharts是功能强大、开源、美观、图表丰富、兼容绝大多数浏览器的纯js图表库 中文学习网址:http://www.hcharts.cn/ 一、下载最新版的highcharts 二、在项目中引入js 三、jsp 源码 &#...
  • kpchen_0508
  • kpchen_0508
  • 2015-05-29 11:14
  • 2782

Highcharts绘图在项目中的运用

Highcharts绘图在项目中的一些简单运用
  • DarinZanya
  • DarinZanya
  • 2016-11-14 10:36
  • 961

在Java中Highcharts前后台数据交互传输

最近在项目中要添加一个Highcharts数据图表显示。看过官方的Ajax交互事例,可惜好像使用的是PHP语言,而且没有显示后台的代码。百度查看了很多前辈们的事例,发现没一样是我所要的效果。。。最后还是自己试着写写。今天却成功了!我后台用的是SSH框架。在此把此经验分享给大家。 Highchart...
  • qq348843576
  • qq348843576
  • 2015-06-15 14:30
  • 3070

highcharts click事件获取数据传给datagrid ,动态加载数据

点击highcharts的柱子 会触发click事件,并将数据传给后台获取到相应部门下的所有员工信息显示在datagrid 如下:添加在charts的初始化里 plotOptions : { series : { cursor : 'pointer', ev...
  • lixinhui199
  • lixinhui199
  • 2016-02-23 17:21
  • 923

highcharts获取点击事件及其点击点的值

直接上代码[javascript]: chart = new Highcharts.Chart({      plotOptions: {          series: ...
  • zmx729618
  • zmx729618
  • 2016-04-06 10:16
  • 9382

好用的数据highcharts中异步加载数据

未经允许,不得转载!! 水平有限,写的不周之处欢迎指正、交流!! 首先,Highcharts是什么呢?它是让数据可视化更简单,兼容IE6+、完美支持移动端、图表类型丰富、方便快捷的HTML5交互性图标库! HTML5:Highcharts 完全基于 HTML5 技术,不需要按照按照任何插件,也...
  • ime33
  • ime33
  • 2017-01-11 13:00
  • 2970

HighCharts(3)动态加载数据的方式

(1)先看一眼整体流程图(2)我觉得最重要的部分就是数据的处理部分,当然数据的获取我没在上图画出来,下面给出我的servlet(框架ssm) @RequestMapping(value="/systemHistory",method=RequestMethod.POST)...
  • Edison_03
  • Edison_03
  • 2017-08-23 10:33
  • 730

HighCharts趋势图动态设置Series数组(根据后台决定具体几个data), 并动态刷新数据

最近要做一些前台的数据展示, 用到了HighCharts.我这次做的是趋势图,涉及到series数组动态设置, 动态刷新 . 为了便于记忆,在这里记录一下。
  • bsh_csn
  • bsh_csn
  • 2016-06-17 15:46
  • 10550
    个人资料
    • 访问:126694次
    • 积分:1909
    • 等级:
    • 排名:千里之外
    • 原创:22篇
    • 转载:280篇
    • 译文:0篇
    • 评论:2条