简介
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)