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