可视化官方

Highcharts 可视化组件

当用户需要成熟、可访问、可导出且适合商业报表的交互式 Web 图表，或明确要求 Highcharts 时，使用此 Skill。该库擅长：弧线关系图、面积图、面积范围图、面积样条图、面积样条范围图、条形图、贝尔曲线图、箱线图、气泡图、子弹图、柱状图、柱状金字塔图、柱状范围图、圆柱图、依赖轮图、哑铃图、误差线图、漏斗图、3D 漏斗图、仪表盘、热力图、直方图、项目图、折线图、棒棒糖图、网络关系图、组织架构图、气泡打包图、帕累托图、饼图、环形图、多边形图、金字塔图、3D 金字塔图、桑基图、散点图、3D 散点图、实心仪表盘、样条图、流图、旭日图、瓦片地图、时间线、树图、矩形树图、可变半径饼图、可变宽度柱状图、向量图、韦恩图、瀑布图、风羽图、词云、X 区间图、组合图。不要用于追求最小依赖的简单 Chart.js 图表、AI 流式输出、可编辑关系图或通用 3D 场景。

去使用

hustcc

使用17

Skill 文件

Skill

SKILL.md

name	viz-highcharts
title	Highcharts 可视化组件
description	当用户需要成熟、可访问、可导出且适合商业报表的交互式 Web 图表，或明确要求 Highcharts 时，使用此 Skill。该库擅长：弧线关系图、面积图、面积范围图、面积样条图、面积样条范围图、条形图、贝尔曲线图、箱线图、气泡图、子弹图、柱状图、柱状金字塔图、柱状范围图、圆柱图、依赖轮图、哑铃图、误差线图、漏斗图、3D 漏斗图、仪表盘、热力图、直方图、项目图、折线图、棒棒糖图、网络关系图、组织架构图、气泡打包图、帕累托图、饼图、环形图、多边形图、金字塔图、3D 金字塔图、桑基图、散点图、3D 散点图、实心仪表盘、样条图、流图、旭日图、瓦片地图、时间线、树图、矩形树图、可变半径饼图、可变宽度柱状图、向量图、韦恩图、瀑布图、风羽图、词云、X 区间图、组合图。不要用于追求最小依赖的简单 Chart.js 图表、AI 流式输出、可编辑关系图或通用 3D 场景。

Highcharts 可视化组件

概述

本 Skill 基于库，提供丰富的交互式图表组件。Highcharts 是一个成熟、稳定且功能强大的 JavaScript 图表库，支持响应式设计、多种图表类型和丰富的自定义选项。

支持的图表类型

类型	标识符	适用场景
折线图	`line`	趋势分析、时间序列数据
柱状图	`column`	分类数据对比
条形图	`bar`	水平分类数据对比
饼图	`pie`	占比分析、构成分析
面积图	`area`	累积趋势、占比趋势
散点图	`scatter`	相关性分析、分布分析
组合图	`combination`	多维度数据展示

代码模板

基础折线图

html

<div id="chart-container"></div>
<script src="https://cdn.jsdmirror.com/npm/highcharts@11/highcharts.js"></script><script>Highcharts.chart('chart-container', {    chart: {        type: 'line'    },    title: {        text: '{{title}}',        align: 'left'    },    xAxis: {        categories: {{xAxis.categories}},        title: {            text: '{{xAxis.title}}'        }    },    yAxis: {        title: {            text: '{{yAxis.title}}'        }    },    series: [{        name: '{{series.name}}',        data: {{series.data}}    }],    credits: {        enabled: false    }});</script>

<div id="chart-container"></div>
<script src="https://cdn.jsdmirror.com/npm/highcharts@11/highcharts.js"></script><script>Highcharts.chart('chart-container', {    chart: {        type: 'line'    },    title: {        text: '{{title}}',        align: 'left'    },    xAxis: {        categories: {{xAxis.categories}},        title: {            text: '{{xAxis.title}}'        }    },    yAxis: {        title: {            text: '{{yAxis.title}}'        }    },    series: [{        name: '{{series.name}}',        data: {{series.data}}    }],    credits: {        enabled: false    }});</script>

柱状图

html

<div id="chart-container"></div>
<script src="https://cdn.jsdmirror.com/npm/highcharts@11/highcharts.js"></script><script>Highcharts.chart('chart-container', {    chart: {        type: 'column'    },    title: {        text: '{{title}}',        align: 'left'    },    xAxis: {        categories: {{xAxis.categories}},        crosshair: true    },    yAxis: {        min: 0,        title: {            text: '{{yAxis.title}}'        }    },    tooltip: {        shared: true    },    plotOptions: {        column: {            pointPadding: 0.2,            borderWidth: 0        }    },    series: {{series}}});</script>

<div id="chart-container"></div>
<script src="https://cdn.jsdmirror.com/npm/highcharts@11/highcharts.js"></script><script>Highcharts.chart('chart-container', {    chart: {        type: 'column'    },    title: {        text: '{{title}}',        align: 'left'    },    xAxis: {        categories: {{xAxis.categories}},        crosshair: true    },    yAxis: {        min: 0,        title: {            text: '{{yAxis.title}}'        }    },    tooltip: {        shared: true    },    plotOptions: {        column: {            pointPadding: 0.2,            borderWidth: 0        }    },    series: {{series}}});</script>

饼图

html

<div id="chart-container"></div>
<script src="https://cdn.jsdmirror.com/npm/highcharts@11/highcharts.js"></script><script>Highcharts.chart('chart-container', {    chart: {        type: 'pie'    },    title: {        text: '{{title}}',        align: 'left'    },    tooltip: {        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'    },    plotOptions: {        pie: {            allowPointSelect: true,            cursor: 'pointer',            dataLabels: {                enabled: true,                format: '<b>{point.name}</b>: {point.percentage:.1f} %'            }        }    },    series: [{        name: '{{series.name}}',        colorByPoint: true,        data: {{series.data}}    }]});</script>

<div id="chart-container"></div>
<script src="https://cdn.jsdmirror.com/npm/highcharts@11/highcharts.js"></script><script>Highcharts.chart('chart-container', {    chart: {        type: 'pie'    },    title: {        text: '{{title}}',        align: 'left'    },    tooltip: {        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'    },    plotOptions: {        pie: {            allowPointSelect: true,            cursor: 'pointer',            dataLabels: {                enabled: true,                format: '<b>{point.name}</b>: {point.percentage:.1f} %'            }        }    },    series: [{        name: '{{series.name}}',        colorByPoint: true,        data: {{series.data}}    }]});</script>

面积图

html

<div id="chart-container"></div>
<script src="https://cdn.jsdmirror.com/npm/highcharts@11/highcharts.js"></script><script>Highcharts.chart('chart-container', {    chart: {        type: 'area'    },    title: {        text: '{{title}}',        align: 'left'    },    xAxis: {        categories: {{xAxis.categories}}    },    yAxis: {        title: {            text: '{{yAxis.title}}'        }    },    plotOptions: {        area: {            marker: {                enabled: false,                symbol: 'circle',                radius: 2,                states: {                    hover: {                        enabled: true                    }                }            }        }    },    series: {{series}}});</script>

<div id="chart-container"></div>
<script src="https://cdn.jsdmirror.com/npm/highcharts@11/highcharts.js"></script><script>Highcharts.chart('chart-container', {    chart: {        type: 'area'    },    title: {        text: '{{title}}',        align: 'left'    },    xAxis: {        categories: {{xAxis.categories}}    },    yAxis: {        title: {            text: '{{yAxis.title}}'        }    },    plotOptions: {        area: {            marker: {                enabled: false,                symbol: 'circle',                radius: 2,                states: {                    hover: {                        enabled: true                    }                }            }        }    },    series: {{series}}});</script>

数据源适配

通用数据格式

json

{  "title": "销售数据统计",  "xAxis": {    "title": "月份",    "categories": ["1月", "2月", "3月", "4月", "5月", "6月"]  },  "yAxis": {    "title": "销售额（万元）"  },  "series": [    {      "name": "产品A",      "data": [120, 150, 180, 200, 170, 210]    },    {      "name": "产品B",      "data": [100, 130, 160, 140, 190, 230]    }  ]}

{  "title": "销售数据统计",  "xAxis": {    "title": "月份",    "categories": ["1月", "2月", "3月", "4月", "5月", "6月"]  },  "yAxis": {    "title": "销售额（万元）"  },  "series": [    {      "name": "产品A",      "data": [120, 150, 180, 200, 170, 210]    },    {      "name": "产品B",      "data": [100, 130, 160, 140, 190, 230]    }  ]}

饼图数据格式

json

{  "title": "市场份额分布",  "series": {    "name": "市场份额",    "data": [      { "name": "品牌A", "y": 35 },      { "name": "品牌B", "y": 25 },      { "name": "品牌C", "y": 20 },      { "name": "品牌D", "y": 15 },      { "name": "其他", "y": 5 }    ]  }}

{  "title": "市场份额分布",  "series": {    "name": "市场份额",    "data": [      { "name": "品牌A", "y": 35 },      { "name": "品牌B", "y": 25 },      { "name": "品牌C", "y": 20 },      { "name": "品牌D", "y": 15 },      { "name": "其他", "y": 5 }    ]  }}

样式变量

变量名	说明	默认值
`--chart-height`	图表高度	`400px`
`--chart-bg`	图表背景色	`#ffffff`
`--title-color`	标题颜色	`#333333`
`--axis-color`	坐标轴颜色	`#666666`
`--grid-color`	网格线颜色	`#e6e6e6`
`--primary-colors`	主色序列	`#7cb5ec, #434348, #90ed7d, #f7a35c, #8085e9`

外观微调指南

1. 响应式配置

javascript

chart: {    type: 'line',    height: '100%',    events: {        redraw: function() {            // 自适应调整        }    }}

chart: {    type: 'line',    height: '100%',    events: {        redraw: function() {            // 自适应调整        }    }}

2. 自定义颜色主题

javascript

colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4']

colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4']

3. 工具提示样式

javascript

tooltip: {    backgroundColor: 'rgba(255,255,255,0.95)',    style: {        color: '#333'    },    borderRadius: 8,    shadow: true}

tooltip: {    backgroundColor: 'rgba(255,255,255,0.95)',    style: {        color: '#333'    },    borderRadius: 8,    shadow: true}

4. 图例布局

javascript

legend: {    layout: 'horizontal',    align: 'center',    verticalAlign: 'bottom',    itemStyle: {        fontWeight: 'normal'    }}

legend: {    layout: 'horizontal',    align: 'center',    verticalAlign: 'bottom',    itemStyle: {        fontWeight: 'normal'    }}

交互能力

交互功能	配置示例
数据点提示	`tooltip: { enabled: true, shared: true }`
图例筛选	`legend: { enabled: true }`
数据缩放	加载 `highcharts/modules/data` 和 `highcharts/modules/drilldown`
数据导出	加载 `highcharts/modules/exporting`
点击事件	`plotOptions.series.point.events.click: function() {}`

使用示例

完整折线图示例

html

<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title>月度销售趋势</title>    <script src="https://cdn.jsdmirror.com/npm/highcharts@11/highcharts.js"></script></head><body>    <div id="container" style="width: 100%; height: 400px;"></div>        <script>    Highcharts.chart('container', {        chart: {            type: 'line'        },        title: {            text: '2024年月度销售趋势',            align: 'left',            style: {                fontSize: '18px',                fontWeight: 'bold'            }        },        xAxis: {            categories: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],            title: {                text: '月份'            }        },        yAxis: {            title: {                text: '销售额（万元）'            }        },        series: [{            name: '销售额',            data: [120, 135, 148, 162, 175, 188, 195, 210, 205, 218, 225, 240],            color: '#058DC7',            marker: {                enabled: true,                radius: 4            }        }],        tooltip: {            valueSuffix: '万元'        },        credits: {            enabled: false        }    });    </script></body></html>

<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title>月度销售趋势</title>    <script src="https://cdn.jsdmirror.com/npm/highcharts@11/highcharts.js"></script></head><body>    <div id="container" style="width: 100%; height: 400px;"></div>        <script>    Highcharts.chart('container', {        chart: {            type: 'line'        },        title: {            text: '2024年月度销售趋势',            align: 'left',            style: {                fontSize: '18px',                fontWeight: 'bold'            }        },        xAxis: {            categories: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],            title: {                text: '月份'            }        },        yAxis: {            title: {                text: '销售额（万元）'            }        },        series: [{            name: '销售额',            data: [120, 135, 148, 162, 175, 188, 195, 210, 205, 218, 225, 240],            color: '#058DC7',            marker: {                enabled: true,                radius: 4            }        }],        tooltip: {            valueSuffix: '万元'        },        credits: {            enabled: false        }    });    </script></body></html>

CDN 来源

扩展模块

如需更多高级功能，可加载以下模块：

html

<!-- 数据导出 --><script src="https://cdn.jsdmirror.com/npm/highcharts@11/modules/exporting.js"></script><script src="https://cdn.jsdmirror.com/npm/highcharts@11/modules/export-data.js"></script>
<!-- 数据钻取 --><script src="https://cdn.jsdmirror.com/npm/highcharts@11/modules/drilldown.js"></script>
<!-- 访问无障碍 --><script src="https://cdn.jsdmirror.com/npm/highcharts@11/modules/accessibility.js"></script>
<!-- 3D 图表 --><script src="https://cdn.jsdmirror.com/npm/highcharts@11/highcharts-3d.js"></script>
<!-- 更多图表类型 --><script src="https://cdn.jsdmirror.com/npm/highcharts@11/modules/stock.js"></script><script src="https://cdn.jsdmirror.com/npm/highcharts@11/modules/gantt.js"></script>

<!-- 数据导出 --><script src="https://cdn.jsdmirror.com/npm/highcharts@11/modules/exporting.js"></script><script src="https://cdn.jsdmirror.com/npm/highcharts@11/modules/export-data.js"></script>
<!-- 数据钻取 --><script src="https://cdn.jsdmirror.com/npm/highcharts@11/modules/drilldown.js"></script>
<!-- 访问无障碍 --><script src="https://cdn.jsdmirror.com/npm/highcharts@11/modules/accessibility.js"></script>
<!-- 3D 图表 --><script src="https://cdn.jsdmirror.com/npm/highcharts@11/highcharts-3d.js"></script>
<!-- 更多图表类型 --><script src="https://cdn.jsdmirror.com/npm/highcharts@11/modules/stock.js"></script><script src="https://cdn.jsdmirror.com/npm/highcharts@11/modules/gantt.js"></script>

参考资源

Ln 1, Col 1MarkdownSpaces: 2

No errors