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

转载于:https://www.cnblogs.com/LoveHe/p/4238850.html