HighChart 实现从后台取数据来实时更新柱状和折线组图

前段时间公司让弄图表，给我说有HighCharts这个js插件，于是上网上搜，由于本人是写后端的，对于JavaScript和jQuery不是很熟悉，虽然找到了模板，但是还是不明白，所以一点一点的改，但好的结果是最后还是搞出来，所以写个随笔，记录和总结下

  var id =${id};

    $.ajax({

      url: '${base}/act/manage/ggdr/getChartsData',

      type: 'POST',

      dataType: 'json',

      data:{'id':id},

      success:function(data){

          console.log(data[1].create_time);

          var xData = [];//组装图表行的数据（x轴）

          var yData = [];//组装图表每列的数据（y轴）

          var addData =[];//因为我的图表是柱状图和折线图组合的图表，所以需要组装折线图的列数据

          var sum =0;

          for(var i=0;i<data.length;i++){

              var temp = new Date(data[i].create_time);

              var formateDte = temp.getFullYear()+'-'+(temp.getMonth()+1)+'-'+temp.getDate();

              xData.push(formateDte);

              yData.push(data[i].num);

              sum +=data[i].num;

              addData.push(sum);

          }

上面这段是我从后台取数据的的代码，大家可以不用在意

var chart;

          chart = new Highcharts.Chart({

          chart: {

              renderTo: 'chart_combo' //关联页面元素div#id //这里是定义图表放在哪，红色的字就是div的id

          },

          title: {  //图表标题

              text: '果果达人参与用户趋势图'

          },

          xAxis: { //x轴

              categories: xData,  //X轴类别

              labels:{y:18}  //x轴标签位置：距X轴下方18像素

          },

          yAxis: {  //y轴

              title: {text: '参与人数（人）'}, //y轴标题

              lineWidth: 1 //基线宽度

          },

          tooltip: {

              formatter: function() { //格式化鼠标滑向图表数据点时显示的提示框

                  var s;

                  if (this.point.name) { // 饼状图

                      s = '<b>' + this.point.name + '</b>: <br>' + this.y+ '人(' +

                        twoDecimal(this.percentage) + '%)';

                  } else {

                      s = '' + this.x + ': ' + this.y + '人';

                  }

                  return s;

              }

          }, 

          exporting: {

              enabled: false  //设置导出按钮不可用

          },

          plotOptions:{

              series:{

                  pointWidth:30

              }

          },

          series: [{ //数据列

              type: 'column',

              name: '每日参加人数',

              data: yData //这里需要一个数组，我们在上面已经组装好的列数据可以直接赋值在这

          },

          {

              type: 'spline',

              name: '目前总参加人数',

              data: addData //这里也一样，这是折线图的数据

          }]

        });

      }

    })

巴特西

HighChart 实现从后台取数据来实时更新柱状和折线组图

最新文章

热门文章