HighChart相关笔记

修改导出excel表表头的表名

1. 默认情况下，标题显示为Chart

2. 加上title属性之后，标题显示为title属性的值

3. 如果不想标题显示在页面中，就加样式：

   .highcharts-title{
       display:none;
   }

修改下载的excel表名

设置title对象的text属性为图表的名称

title: {
    text: filename
},

若不想表名显示在页面的图表中，可以用样式将它隐藏

display：none

修改导出后的excel表的第一列的标题Category

1. 第一列的标题默认是Category

2. 修改modules 中的export-data.src.js（导出excel表功能的js，未压缩版）

   调试可知，dataRows的值决定了标题的显示；而dataRows的值由topHeaders和subHeaders决定，所以动态将它的值修改。

3. 给options添加一个excelTitle0属性值

   topHeaders[0] = this.options.exporting.excelTitle0;
   subHeaders[0] = this.options.exporting.excelTitle0;    

4. 在下载excel表格之前，动态设置excelTitle0属性

修改数据表格category值

1、给点击按钮加上data-category属性：

2、重新调用hightcharts修改category属性的方法：

修改条形图柱子的宽度

plotOptions: {
  bar: {
     maxPointWidth: 20
  }
}

在条形图柱子后面加上数值

plotOptions: {
  bar: {
     dataLabels: {
     	enabled: true,
     	allowOverlap: true   // 允许数据标签重叠
     }
  }
}

将Highcharts图表数据生成Table表格

重绘

赏

谢谢你请我吃糖果

支付宝

微信

• 本文作者： LQbank
• 本文链接： http://example.com/2021/01/15/HighChart相关笔记/
• 版权声明： 本博客所有文章除特别声明外，均采用 MIT 许可协议。转载请注明出处！