使用highcharts绘制趋势图

亦凉 2022-06-04 00:36 272阅读 0赞

先上图

![Center][]

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

[Center]: /images/20220604/8eb24dbb43fe40c8a6a91b15bdd37760.png

发表评论取消回复

表情：

评论列表（有 0 条评论，272人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue+highcharts使用甘特图

我在使用highCharts的曲线图，柱状图时，都没有任何问题，但是在使用甘特图时，控制台报错 missingModuleFor: xrange" 很明显是缺少甘特图的

拼搏现实的明天。/ 2023年01月16日 14:30/ 0 赞/ 267 阅读

相关 HighCharts饼图

HighCharts官网 [http://www.highcharts.com/][http_www.highcharts.com] 饼图 <!

ゝ一世哀愁。/ 2022年08月27日 03:41/ 0 赞/ 205 阅读

相关 Highcharts拆线图

Highcharts官网 [http://www.highcharts.com/][http_www.highcharts.com] 基本拆线图

野性酷女/ 2022年08月27日 03:41/ 0 赞/ 179 阅读

相关 Highcharts基本柱图

Highcharts官网 > > > > > [http://www.highcharts.com/][http_www.highcharts.com]

逃离我推掉我的手/ 2022年08月27日 03:40/ 0 赞/ 223 阅读

相关使用highcharts生成统计图

1. 导入核心js类库 :highcharts.js、highcharts.src.js、exporting.js、exporting.src.js 2. 定义图形展示的d

旧城等待，/ 2022年08月13日 11:52/ 0 赞/ 180 阅读

相关使用MySQLWorkBench绘制ER图

原文地址: http://blog.csdn.net/xujiayin/article/details/51689749 数据库设计工具MySQLWork

╰半夏微凉°/ 2022年06月15日 07:47/ 0 赞/ 552 阅读

相关使用highcharts绘制趋势图

先上图 ![Center][] 难点在于,两种数据使用不同的表现形式,一种是column,一种是spline(平滑曲线) / 绘制趋势图

亦凉/ 2022年06月04日 00:36/ 0 赞/ 273 阅读

相关 pandas 绘制天池O2O大赛购买趋势图

今天在回顾之前做的O2O大赛时，发现了大神提供的一个完整思路[https://blog.csdn.net/bryan\_\_/article/details/539

妖狐艹你老母/ 2022年05月19日 08:39/ 0 赞/ 176 阅读

相关 Highcharter绘制中国地图

刚发现segmantfault不支持iframe，绘图效果可以在这"[Highcharter绘制中国地图][Highcharter]"查看。 Highmaps数据在[

青旅半醒/ 2022年02月26日 15:11/ 0 赞/ 531 阅读

相关 Highcharts库-柱状图的简单使用

根据cdn引入Highcharts库： <script src="http://cdn.highcharts.com.cn/highcharts/highcharts

一时失言乱红尘/ 2022年01月20日 12:27/ 0 赞/ 313 阅读