highChart绘图及jx-xlsx导出表格

1,380 阅读3分钟

简介

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]
		}]
	});

展示如下:

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

导出excel文件

在这里使用的是jx-xlsx,安装下载后可以使用其方法 文档地址: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.json_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)