使用highcharts绘制趋势图

先上图

难点在于,两种数据使用不同的表现形式,一种是column,一种是spline(平滑曲线)

/**
 * 绘制趋势图
 * id HTML Canvas 的ID
 * title 标题
 * subtitle 子标题
 * yTitle 纵轴标题
 * labels 横轴坐标值数组
 * val 第一组数据
 * avg 第二组数据
 */
var draw=function(id,title,subtitle,yTitle,labels,val,avg){
      //常规配置,使用column布局
      $('#'+id).highcharts({
          chart:{
              type:'column'
          },
          title:{text:title},
          subtitle:{text:subtitle},
          xAxis:{categories:labels,crosshair:true},
          yAxis:[
              { opposite: true   },
              { }
          ],
          tooltip: {
              headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
              pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
              '<td style="padding:0"><b>{point.y:.1f} </b></td></tr>',
              footerFormat: '</table>',
              shared: true,
              useHTML: true
          },
          plotOptions: {
              column: {
                  pointPadding: 0.2,
                  borderWidth: 0
              }
          },
          series:[
              { name:yTitle ,yAxis:0,data:val,type: 'column',color: '#AA4643'},
              { name:'avg3',yAxis:1,data:avg,type: 'spline',color: '#89A54E'}
          ]
      })
};