jQuery HighchartTable 插件技术文档

1. 安装指南

环境要求

在开始安装之前，请确保您的环境中已经包含了以下内容：

• jQuery (版本 >= 1.4.3)
• Highcharts 图表库

安装步骤

1. 下载 jQuery HighchartTable 插件文件。
2. 将下载的插件文件（通常是 jquery.highchartTable.js）放置在您的项目目录中。
3. 在您的 HTML 页面中，引入 jQuery、Highcharts 库以及 jQuery HighchartTable 插件文件。

<script src="path/to/jquery.min.js" type="text/javascript"></script>
<script src="path/to/highcharts.js" type="text/javascript"></script>
<script src="path/to/jquery.highchartTable.js" type="text/javascript"></script>

4. 确保 jQuery 和 Highcharts 库的引入顺序正确，先引入 jQuery，再引入 Highcharts，最后引入 jQuery HighchartTable 插件。

2. 项目的使用说明

快速开始

• 在 HTML 中创建一个数据表格，并添加相应的 class="highchart" 和 data-* 属性。
• 使用 jQuery 选择器调用 highchartTable() 函数。

<table class="highchart" data-graph-container="highchart-container" data-graph-type="column">
    <caption>销售数据</caption>
    <thead>
        <tr>
            <th>月份</th>
            <th>销售额</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>一月</td>
            <td>8000</td>
        </tr>
        <tr>
            <td>二月</td>
            <td>12000</td>
        </tr>
    </tbody>
</table>

$(document).ready(function() {
    $('table.highchart').highchartTable();
});

配置选项

• data-graph-type: 指定图表类型，如 column, line, area, spline, pie。
• data-graph-container: 指定图表渲染的容器，可以是 CSS 选择器。
• data-graph-container-before: 如果图表需要渲染在表格之前，可以设置为 1。

3. 项目API使用文档

highchartTable() 函数

• 描述：将 HTML 数据表格转换为 Highcharts 图表。
• 参数：无参数。
• 调用方式：在文档加载完成后，通过选择器选择表格，并调用此函数。

$('table.highchart').highchartTable();

属性

• data-graph-type: 表格的 data-* 属性，用于指定图表类型。
• data-graph-container: 表格的 data-* 属性，用于指定图表渲染的容器。
• data-graph-container-before: 表格的 data-* 属性，用于指定图表是否渲染在表格之前。

4. 项目安装方式

手动安装

1. 从项目网站或 GitHub 下载最新版本的 jQuery HighchartTable 插件。
2. 将下载的文件放入项目的脚本目录。
3. 在 HTML 页面中引入 jQuery、Highcharts 和 jQuery HighchartTable 插件。

使用包管理工具

如果您使用 npm 或其他包管理工具，可以添加项目依赖：

npm install jquery-highcharttable

然后，在您的项目中引入：

import 'path/to/jquery.highchartTable.js';

确保遵循上述步骤，您就可以成功安装并使用 jQuery HighchartTable 插件了。