highChart绘图及jx-xlsx导出表格

简介

highchart是一个纯js的图表库，支持普通图表，地图，股票图等，属于配置型图表，与echart类似。

使用方法

html页面引入：

<script src="http://cdn.highcharts.com.cn/highcharts/highcharts.js"></script>

npm安装

npm install highcharts --save

import Highcharts from 'highcharts/highstock'

图表组成

常见如：

属性	作用	其他
Title	标题
Axis	坐标轴
Series	数据列	也是数据源
Tooltip	数据提示框	当鼠标悬停在某点上时，以框的形式提示该点的数据
Legend	图例	通过点击标示可以显示或隐藏该数据列。
Credits	版权标签	默认是Highcharts官网地址
Exporting	导出功能	需要引入exporting.js
PlotLines	标示线	以在图表上增加一条标示线，如平均值线，最高值线等
PlotBand	标示区

配置页面

最基本的配置

$('#container').highcharts({
        title:{     //  表标题
			text:'小学生人数表'
		},
        chart: {
          type: 'area', //  图表类型
        },
        tooltip: { //   提示
			pointFormat:
			'<span style="color:{series.color}">{series.name}</span>: {point.y:,.0f} 万<br/>',
		},
		yAxis: {    //y轴侧边基准
			labels: {
				format: '{value}人',
			},
		},
		series: [{ // 数据
			name:'测试',
			data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
		}]
	});

展示如下：

具体详细配置移步文档：https://highcharts.com.cn/

导出excel文件

在这里使用的是jx-xlsx，安装下载后可以使用其方法
文档地址：https://docs.sheetjs.com/

基本用法

写入：

方法	作用
aoa_to_sheet	将JS数组的数组（[ […],[…],[…] ]）转换为工作表
json_to_sheet	将json对象数组转换为工作表
table_to_sheet	将DOM TABLE元素转换为工作表
sheet_add_aoa	将JS数据数组添加到现有工作表中
sheet_add_json	将json对象数组添加到现有工作表中

读取：

方法	属性
sheet_to_json	将工作表对象转换为JSON对象数组
sheet_to_csv	将工作表转换成csv
sheet_to_txt	生成UTF16格式的文本
sheet_to_html	生成HTML输出

单元格和单元格地址操作：

方法	作用
format_cell	生成单元格的文本值（使用数字格式)
encode_row / decode_row	在0索引行和1索引行之间转换
encode_col / decode_col	在0索引列和列名之间进行转换
encode_cell / decode_cell	转换单元格地址
encode_range / decode_range	转换单元格范围

图纸对象

属性	作用
sheet[address]	返回指定地址的单元格对象
sheet[’!ref’]	基于A-1的范围代表图纸范围
sheet[’!margins’]	代表页边距的对象

工作表对象

属性	作用
ws[’!cols’]	列属性对象的数组
ws[’!rows’]	行属性对象数组
ws[’!merges’]	与工作表中合并单元格相对应的范围对象数组
ws[’!protect’]	书写纸保护属性的对象

在导出文件时，目标数据结构为

使用aoa_to_sheet方法时，源数据结构

const data = [
['id', '姓名', 年龄],
['1','小明','10'],
['2','小红','14'],
//···
]

XLSX.utils.aoa_to_sheet(data)

使用json_to_sheet方法时，源数据结构：

const data =  [{
  id: '1',
  name: '小明',
  age: '10',
}, {
  // ...
}]
XLSX.utils.aoa_to_sheet(data)

highchart 导出Excel

获取chart实例，并调用getCSV获取数据

var chart = new Highcharts.Chart({
	chart: {
		renderTo: 'container'
	},
	title: {
		text: '导出 Excel '
	},
	xAxis: {
		categories: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
	},
	series: [{
		name: '测试数据',
		data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
	}]
})

const chartData = chart.getCSV()

有’\n’分割的字符串

处理后，即可获得aoa_to_sheet需要的源数据格式

chartData.split('\n').map((item) => item.split(','))  

导出方法：如js数组

const worksheet = XLSX.utils.aoa_to_sheet(data); // 将js数组转为工作表
const newWorkbook = XLSX.utils.book_new(); //创建工作蒲对象
XLSX.utils.book_append_sheet(newWorkbook, worksheet, '表名称');
//在工作蒲里添入工作表
XLSX.writeFile(newWorkbook, `./文件名.xlsx`);
//写文件，导出

其他

对象的话,按照源数据结构

const data = dataSouce.map(item => ({
    'id': item.id,
    '姓名': item.name,
    '年龄': item.age
  }));
const worksheet = XLSX.utils.json_to_sheet(data)