使用highcharts绘制趋势图

最新推荐文章于 2022-04-08 09:24:47 发布

原创最新推荐文章于 2022-04-08 09:24:47 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了如何使用Highcharts库绘制结合柱状图和平滑曲线的趋势图表，特别强调了处理不同数据类型表现形式的难点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先上图

难点在于,两种数据使用不同的表现形式,一种是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'}
          ]
      })
};