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 //这里也一样，这是折线图的数据
          }]
        });
      }
    })