简介
highchartTable 是一个基于 Highcharts 的 npm 包，可以将表格数据可视化成图表。该包支持多种类型的图表，如柱状图、折线图、面积图等，并提供了丰富的配置选项。
安装
在使用 highchartTable 之前，需要安装 Highcharts 和 jQuery。
npm install highcharts jquery --save
然后安装 highchartTable：
npm install highcharttable --save
使用
导入模块
在页面中导入 Highcharts、jQuery 和 highchartTable 模块：
<!-- 首先引入 jQuery --> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <!-- 引入 Highcharts --> <script src="https://cdn.bootcdn.net/ajax/libs/highcharts/9.2.1/highcharts.min.js"></script> <!-- 引入 highchartTable --> <script src="node_modules/highcharttable/index.js"></script>
初始化
创建一个 div 元素，用于显示图表：
<div id="container"></div>
在 JavaScript 文件中初始化 highchartTable：
-- -------------------- ---- -------
------ ---------- ---- -------------
------ - ---- ---------
------ -----------------
----- ---- - -
-------- -------- ----------- ----------
-------- ----- ---- -----
-------- ----- ---- -----
-------- ---- ----- -----
-------- ----- ---- ----
--
----- ------- - -
------ -
----- --------
--
------ -
----- --------------- --------
-
--
------------------------------------ ---------配置选项
highchartTable 提供了多种配置选项，可以用于自定义图表的样式和行为。以下是一些常见的配置选项：
chart.type
指定图表类型，默认为 'line'。
{
chart: {
type: 'column' // 柱状图
}
}title.text
设置图表标题。
{
title: {
text: 'My Chart'
}
}xAxis.categories
设置 X 轴标签，支持数组和字符串。
{
xAxis: {
categories: ['Apple', 'Banana', 'Orange']
}
}yAxis.min 和 yAxis.max
设置 Y 轴范围。
{
yAxis: {
min: 0,
max: 100
}
}series
设置系列数据。
-- -------------------- ---- -------
-
------- --
----- --------
----- ----- ---- ---- ----- ----- ----- ----- ----- ----- ----- ----- ----
-- -
----- ---- ------
----- ------ ---- ---- ----- ----- ----- ----- ----- ----- ----- ---- ----
--
-更多配置选项请参考 highchartTable 文档。
示例代码
以下是一个完整的示例代码，展示了如何使用 highchartTable 将表格数据可视化成柱状图：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- --------------------- --------------- ------- ---------------------------------------------------------------------------- ------- ------------------------------------------------------------------------------------ ------- ---------------------------------------------------- ------- ------ ---- --------------------- -------- ----- ---- - - -------- -------- ----------- ---------- -------- - ----------------------------------------------------------- -------- ----------------------------------------------------------------------------------