Highcharts 教程

Highcharts 教程

Highcharts 是一款基于 JavaScript 的图表库,由挪威公司 Highsoft 开发,支持曲线图、柱状图、饼图、散点图、3D 图等几十种图表类型,是 Web 数据可视化的主流选择。

核心特性

  • 丰富图表类型:曲线、柱状、饼图、散点、气泡、树状、仪表盘等
  • 交互性强:鼠标悬停提示、缩放、拖拽、动态更新
  • 兼容性好:支持所有主流浏览器与移动端
  • 无依赖:只需 jQuery(或完全独立),轻量易用
  • 文档完善:官方 API 与示例齐全

引入方式

<!-- CDN 引入 -->
<script src="https://cdn.bootcdn.net/ajax/libs/highcharts/11.3.0/highcharts.min.js"></script>

第一个图表

<div id="container"></div>

<script>
Highcharts.chart("container", {
    title: { text: "月度销售额" },
    xAxis: { categories: ["1月", "2月", "3月", "4月"] },
    yAxis: { title: { text: "销售额(万元)" } },
    series: [{
        name: "2025年",
        data: [120, 150, 130, 180]
    }]
});
</script>

学习路线

  1. 环境配置与配置语法
  2. 各图表类型(曲线/区域/条形/柱形/饼图/散点/气泡)
  3. 动态图与组合图
  4. 3D 图、测量图、树状图

Highcharts 环境配置

Highcharts 环境配置

1. 下载与引入

# CDN 引入(推荐)
<script src="https://cdn.bootcdn.net/ajax/libs/highcharts/11.3.0/highcharts.min.js"></script>

# 完整 CDN(含更多模块)
<script src="https://code.highcharts.com/highcharts.js"></script>

# 本地下载
# https://www.highcharts.com/download
# 引入 highcharts.js 即可

2. 按需引入模块

<!-- 额外模块按需引入 -->
<script src="https://code.highcharts.com/modules/exporting.js"></script>    <!-- 导出 -->
<script src="https://code.highcharts.com/modules/3d.js"></script>           <!-- 3D -->
<script src="https://code.highcharts.com/modules/treemap.js"></script>      <!-- 树状图 -->
<script src="https://code.highcharts.com/highcharts-more.js"></script>      <!-- 气泡/极区等 -->
<script src="https://code.highcharts.com/modules/solid-gauge.js"></script>  <!-- 仪表盘 -->

3. 基本页面结构

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Highcharts 图表</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/highcharts/11.3.0/highcharts.min.js"></script>
</head>
<body>
  <div id="chart" style="width: 800px; height: 400px;"></div>

  <script>
  Highcharts.chart("chart", {
      title: { text: "示例图表" },
      series: [{ name: "数据", data: [1, 3, 2, 5] }]
  });
  </script>
</body>
</html>

4. Vue/React 集成

# Vue 使用
npm install highcharts
import Highcharts from "highcharts";

// 在组件中
mounted() {
  Highcharts.chart("chart-el", {
    title: { text: "Vue 图表" },
    series: [{ data: [5, 10, 8] }]
  });
}

# 或使用官方封装 highcharts-vue / highcharts-react-official

5. 容器要求

  • 容器必须有宽度和高度(否则图表不显示)
  • 推荐设置百分比或固定像素
  • 多个图表用不同 id
  • 重新渲染前先销毁:chart.destroy()

Highcharts 配置语法

Highcharts 配置语法

1. 配置对象结构

Highcharts.chart("container", {
    // 图表全局
    chart: {
        type: "line",          // 图表类型
        backgroundColor: "#fff",
        height: 400
    },
    // 标题
    title: {
        text: "销售趋势",
        style: { color: "#333", fontSize: "18px" }
    },
    subtitle: { text: "副标题" },
    // X 轴
    xAxis: {
        categories: ["周一", "周二", "周三"],
        title: { text: "日期" }
    },
    // Y 轴
    yAxis: {
        title: { text: "数值" },
        min: 0
    },
    // 数据提示
    tooltip: {
        shared: true,
        valueSuffix: " 万元"
    },
    // 图例
    legend: {
        layout: "horizontal",
        align: "center"
    },
    // 数据系列
    series: [{
        name: "2025年",
        data: [100, 120, 150]
    }]
});

2. 图表类型 chart.type

line        曲线图
area        区域图
bar         条形图
column      柱形图
pie         饼图
scatter     散点图
bubble      气泡图
treemap     树状图
solidgauge  仪表盘
column3d    3D 柱形
line3d      3D 曲线

3. 数据格式

// 简单数组
data: [1, 3, 2]

// 键值对数组
data: [["苹果", 5], ["香蕉", 8]]

// 对象数组(x, y)
data: [{x: 1, y: 10}, {x: 2, y: 20}]

// 命名点
data: [{name: "北京", y: 100}, {name: "上海", y: 150}]

4. 多系列数据

series: [
    { name: "2024年", data: [100, 110, 120] },
    { name: "2025年", data: [130, 140, 150] },
    { name: "2026年", data: [160, 170, 180] }
]

5. 主题与样式

// 全局颜色
Highcharts.setOptions({
    colors: ["#7cb5ec", "#434348", "#90ed7d", "#f7a35c", "#8085e9"]
});

// 导出按钮
exporting: {
    enabled: true,
    buttons: { contextButton: { menuItems: ["downloadPNG", "downloadPDF"] } }
}

Highcharts 曲线图

Highcharts 曲线图

曲线图(line chart)用于展示数据随时间或类别的变化趋势,是最高频的图表类型。

1. 基本曲线图

<div id="line-chart"></div>

<script>
Highcharts.chart("line-chart", {
    title: { text: "月均气温变化" },
    xAxis: {
        categories: ["1月", "2月", "3月", "4月", "5月", "6月"]
    },
    yAxis: {
        title: { text: "气温(°C)" }
    },
    series: [{
        name: "北京",
        data: [-3, 0, 8, 15, 22, 27]
    }, {
        name: "广州",
        data: [13, 15, 19, 24, 28, 31]
    }]
});
</script>

2. 平滑曲线

Highcharts.chart("container", {
    chart: { type: "spline" },   // 平滑曲线
    title: { text: "平滑曲线图" },
    series: [{
        data: [10, 15, 12, 20, 18, 25]
    }]
});

3. 数据点样式

series: [{
    name: "趋势",
    data: [10, 20, 15, 30, 25],
    lineWidth: 3,               // 线宽
    color: "#e74c3c",           // 线条颜色
    marker: {
        symbol: "circle",       // 点形状: circle/square/diamond
        radius: 5,
        fillColor: "#fff",
        lineWidth: 2,
        lineColor: "#e74c3c"
    },
    dashStyle: "solid"          // 线型: solid/dash/dot
}]

4. 面积填充效果

series: [{
    name: "访问量",
    data: [100, 120, 95, 150, 130],
    fillColor: {
        linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
        stops: [
            [0, "rgba(124,181,236,0.6)"],
            [1, "rgba(124,181,236,0.1)"]
        ]
    }
}]

5. 双 Y 轴曲线

Highcharts.chart("container", {
    title: { text: "销售与利润" },
    xAxis: { categories: ["Q1", "Q2", "Q3", "Q4"] },
    yAxis: [
        { title: { text: "销售额" } },
        { title: { text: "利润率" }, opposite: true }
    ],
    series: [
        { name: "销售额", data: [100, 120, 110, 150] },
        { name: "利润率", data: [20, 25, 18, 30],
          yAxis: 1, dashStyle: "dash" }
    ]
});

Highcharts 区域图

Highcharts 区域图

区域图(area chart)在曲线图基础上填充面积,适合展示数据量的累计变化与对比。

1. 基本区域图

<div id="area-chart"></div>

<script>
Highcharts.chart("area-chart", {
    chart: { type: "area" },
    title: { text: "年度用户增长" },
    xAxis: {
        categories: ["1月", "2月", "3月", "4月", "5月", "6月"]
    },
    yAxis: {
        title: { text: "用户数(万)" }
    },
    series: [{
        name: "新增用户",
        data: [5, 8, 12, 15, 22, 30]
    }]
});
</script>

2. 堆叠区域图

Highcharts.chart("container", {
    chart: { type: "area" },
    title: { text: "各渠道访问量" },
    plotOptions: {
        area: {
            stacking: "normal"    // 堆叠: normal 普通 / percent 百分比
        }
    },
    xAxis: { categories: ["周一", "周二", "周三", "周四", "周五"] },
    series: [
        { name: "直接访问", data: [30, 40, 35, 45, 50] },
        { name: "搜索引擎", data: [50, 45, 60, 55, 70] },
        { name: "社交媒体", data: [20, 25, 15, 30, 25] }
    ]
});

3. 百分比堆叠

plotOptions: {
    area: { stacking: "percent" }
}
// Y 轴显示百分比占比,展示各渠道份额

4. 透明度与渐变

series: [{
    name: "收入",
    data: [100, 130, 120, 160],
    fillOpacity: 0.4,    // 填充透明度
    lineColor: "#2ecc71",
    lineWidth: 2
}]

5. 区域图应用场景

  • 流量/访问量趋势
  • 用户增长曲线
  • 库存变化
  • 渠道占比对比(堆叠)

Highcharts 条形图

Highcharts 条形图

条形图(bar chart)是横向柱状图,适合展示分类名称较长的数据对比。

1. 基本条形图

<div id="bar-chart"></div>

<script>
Highcharts.chart("bar-chart", {
    chart: { type: "bar" },
    title: { text: "各城市 GDP(亿元)" },
    xAxis: {
        categories: ["北京", "上海", "广州", "深圳", "杭州"]
    },
    yAxis: {
        title: { text: "GDP(亿元)" }
    },
    series: [{
        name: "GDP",
        data: [43760, 47218, 30355, 34606, 21860]
    }]
});
</script>

2. 横向条形图排序

// 数据降序展示
series: [{
    name: "得分",
    data: [
        { name: "产品A", y: 92 },
        { name: "产品B", y: 85 },
        { name: "产品C", y: 78 },
        { name: "产品D", y: 65 }
    ]
}]

// 或者用 JavaScript 排序后传入
const data = [{name:"A",y:65},{name:"B",y:92},{name:"C",y:78}];
data.sort((a, b) => b.y - a.y);

3. 分组条形图

Highcharts.chart("container", {
    chart: { type: "bar" },
    title: { text: "男女销量对比" },
    xAxis: { categories: ["手机", "电脑", "平板", "耳机"] },
    series: [
        { name: "男", data: [120, 90, 40, 80] },
        { name: "女", data: [110, 70, 60, 95] }
    ]
});

4. 堆叠条形图

plotOptions: {
    bar: { stacking: "normal" }
},
series: [
    { name: "线上", data: [50, 40, 30] },
    { name: "线下", data: [30, 35, 40] }
]

5. 条形图样式

series: [{
    name: "数据",
    data: [10, 20, 30],
    colorByPoint: true,        // 每根不同颜色
    borderRadius: 4,           // 圆角
    dataLabels: {
        enabled: true,         // 显示数值
        format: "{y} 亿元"
    }
}]

Highcharts 柱形图

Highcharts 柱形图

柱形图(column chart)是竖向柱状图,适合分类对比与时间序列展示。

1. 基本柱形图

<div id="column-chart"></div>

<script>
Highcharts.chart("column-chart", {
    chart: { type: "column" },
    title: { text: "季度销售额" },
    xAxis: { categories: ["Q1", "Q2", "Q3", "Q4"] },
    yAxis: { title: { text: "销售额(万元)" } },
    series: [{
        name: "2025年",
        data: [120, 150, 110, 180]
    }, {
        name: "2026年",
        data: [140, 170, 130, 200]
    }]
});
</script>

2. 分组 vs 堆叠

// 分组(默认):并排显示
plotOptions: { column: {} }

// 堆叠
plotOptions: { column: { stacking: "normal" } }

// 百分比堆叠
plotOptions: { column: { stacking: "percent" } }

3. 单色/多彩柱形

series: [{
    name: "数据",
    data: [5, 8, 12, 7, 10],
    colorByPoint: true,   // 每个柱子不同颜色
    colors: ["#e74c3c", "#f39c12", "#2ecc71", "#3498db", "#9b59b6"]
}]

4. 圆角与间距

plotOptions: {
    column: {
        borderRadius: 6,           // 圆角
        pointPadding: 0.1,         // 柱子间间距
        groupPadding: 0.2          // 组间距
    }
}

5. 数据标签与工具提示

plotOptions: {
    column: {
        dataLabels: {
            enabled: true,
            format: "{y} 万元",
            style: { fontWeight: "normal" }
        }
    }
},
tooltip: {
    headerFormat: "<b>{point.x}</b><br/>",
    pointFormat: "{series.name}: {point.y} 万元"
}

Highcharts 饼图

Highcharts 饼图

饼图(pie chart)展示各部分占比,适合份额分布分析。

1. 基本饼图

<div id="pie-chart"></div>

<script>
Highcharts.chart("pie-chart", {
    chart: { type: "pie" },
    title: { text: "市场份额分布" },
    series: [{
        name: "份额",
        data: [
            { name: "Chrome", y: 65 },
            { name: "Edge", y: 12 },
            { name: "Safari", y: 10 },
            { name: "Firefox", y: 8 },
            { name: "其他", y: 5 }
        ]
    }]
});
</script>

2. 显示百分比

plotOptions: {
    pie: {
        allowPointSelect: true,      // 点击选中
        cursor: "pointer",
        dataLabels: {
            enabled: true,
            format: "<b>{point.name}</b>: {point.percentage:.1f}%"
        }
    }
}

3. 环形图(donut)

plotOptions: {
    pie: {
        innerSize: "60%"     // 内部挖空,变成环形
    }
}

4. 半圆饼图

// 起始角度控制半圆
series: [{
    type: "pie",
    startAngle: -90,       // 起始角度
    endAngle: 90,          // 结束角度 → 半圆
    center: ["50%", "75%"], // 中心位置
    size: "150%",
    data: [...]
}]

5. 分离饼块

data: [
    { name: "A", y: 30, sliced: true },   // 分离该块
    { name: "B", y: 50 },
    { name: "C", y: 20 }
]

6. 样式美化

plotOptions: {
    pie: {
        borderColor: "#fff",
        borderWidth: 2,
        shadow: true
    }
},
legend: { enabled: true, layout: "vertical", align: "right" }

Highcharts 散点图

Highcharts 散点图

散点图(scatter chart)用于展示两个变量之间的关系与分布,适合相关性分析。

1. 基本散点图

<div id="scatter-chart"></div>

<script>
Highcharts.chart("scatter-chart", {
    chart: { type: "scatter" },
    title: { text: "身高与体重关系" },
    xAxis: { title: { text: "身高(cm)" } },
    yAxis: { title: { text: "体重(kg)" } },
    series: [{
        name: "样本",
        data: [
            [165, 55], [170, 60], [175, 68], [180, 72],
            [160, 50], [178, 75], [172, 65], [185, 80]
        ]
    }]
});
</script>

2. 多组散点对比

series: [
    { name: "男生", color: "#3498db",
      data: [[170,65],[175,70],[180,75]] },
    { name: "女生", color: "#e74c3c",
      data: [[160,50],[165,55],[158,48]] }
]

3. 标记样式

plotOptions: {
    scatter: {
        marker: {
            radius: 5,
            symbol: "circle",       // circle/square/diamond/triangle
            lineWidth: 1,
            lineColor: "#333"
        },
        jitter: { x: 0.5 }          // 抖动,避免重叠
    }
}

4. 回归线添加

// 用折线叠加趋势线
series: [
    { type: "scatter", name: "数据点", data: points },
    { type: "line", name: "趋势线", data: trendLine, dashStyle: "dash" }
]

5. 大数据量散点

// 大量数据用 boost 模块加速
<script src="https://code.highcharts.com/modules/boost.js"></script>

plotOptions: {
    scatter: { boostThreshold: 1000 }   // 超过 1000 点启用 boost
}

Highcharts 气泡图

Highcharts 气泡图

气泡图(bubble chart)用气泡大小表示第三个维度,适合多维数据对比。

1. 基本气泡图

<div id="bubble-chart"></div>

<script>
Highcharts.chart("bubble-chart", {
    chart: { type: "bubble" },
    title: { text: "产品分析" },
    xAxis: { title: { text: "销量" } },
    yAxis: { title: { text: "利润" } },
    series: [{
        name: "产品",
        data: [
            [100, 50, 30],    // [x, y, 气泡大小]
            [150, 80, 45],
            [80, 120, 60],
            [200, 90, 55]
        ]
    }]
});
</script>

2. 带名称的气泡

series: [{
    name: "产品",
    data: [
        { x: 100, y: 50, z: 30, name: "产品A" },
        { x: 150, y: 80, z: 45, name: "产品B" },
        { x: 80, y: 120, z: 60, name: "产品C" }
    ]
}]

3. 多系列气泡

series: [
    { name: "手机", data: [[50,60,20],[70,80,30],[90,100,25]] },
    { name: "电脑", data: [[30,40,15],[60,50,20],[80,70,35]] }
]

4. 气泡大小控制

plotOptions: {
    bubble: {
        minSize: 5,      // 最小气泡
        maxSize: 60,     // 最大气泡
        colorByPoint: true
    }
}

5. 气泡图应用

  • 产品组合分析(销量×利润×规模)
  • 城市人口与经济数据
  • 市场机会矩阵
  • 风险收益分布

Highcharts 动态图

Highcharts 动态图

动态图实时更新数据,适合监控、行情、传感器数据展示。

1. 实时曲线(定时更新)

<div id="live-chart"></div>

<script>
const chart = Highcharts.chart("live-chart", {
    chart: { type: "line" },
    title: { text: "实时监控数据" },
    xAxis: { type: "datetime", tickPixelInterval: 150 },
    yAxis: { title: { text: "数值" } },
    legend: { enabled: false },
    series: [{ name: "实时数据", data: [] }]
});

// 每秒添加一个数据点
setInterval(() => {
    const point = [
        Date.now(),                          // x: 时间戳
        Math.random() * 100                  // y: 随机值
    ];
    const series = chart.series[0];
    series.addPoint(point, true, true);      // 添加并滚动
}, 1000);
</script>

2. 动态柱状图

const chart = Highcharts.chart("container", {
    chart: { type: "column" },
    title: { text: "实时排名" },
    xAxis: { categories: ["A", "B", "C", "D", "E"] },
    series: [{ name: "得分", data: [0, 0, 0, 0, 0] }]
});

setInterval(() => {
    const newData = [1,2,3,4,5].map(() =>
        Math.floor(Math.random() * 100));
    chart.series[0].setData(newData);   // 整体替换数据
}, 2000);

3. 数据点平滑过渡

chart.series[0].addPoint([Date.now(), value], true, true, {
    duration: 300     // 动画时长(毫秒)
});

4. 动态更新控制

// 停止/恢复更新
let timer = setInterval(update, 1000);

function stopLive() {
    clearInterval(timer);
    chart.series[0].update({ color: "#999" });  // 状态标识
}

function startLive() {
    timer = setInterval(update, 1000);
}

// 内存优化:限制数据点数量
chart.series[0].addPoint(point, true, true, { maxPoints: 100 });

5. WebSocket 实时数据

const ws = new WebSocket("wss://api.example.com/live");

ws.onmessage = (event) => {
    const data = JSON.parse(event.data);
    chart.series[0].addPoint([data.time, data.value], true, true);
};

// 断线重连
ws.onclose = () => setTimeout(() => connect(), 3000);

Highcharts 组合图

Highcharts 组合图

组合图在同一图表中混合多种图表类型,如柱状+折线,常见于"销量对比+趋势"场景。

1. 柱状+折线组合

<div id="combo-chart"></div>

<script>
Highcharts.chart("combo-chart", {
    title: { text: "销售额与增长率" },
    xAxis: { categories: ["Q1", "Q2", "Q3", "Q4"] },
    yAxis: [
        { title: { text: "销售额(万元)" } },
        { title: { text: "增长率(%)" }, opposite: true }
    ],
    series: [
        { name: "销售额", type: "column",
          data: [120, 150, 130, 180], yAxis: 0 },
        { name: "增长率", type: "line",
          data: [20, 25, -13, 38], yAxis: 1,
          dashStyle: "dash", color: "#e74c3c" }
    ]
});
</script>

2. 柱状+面积组合

series: [
    { name: "预算", type: "column", data: [50, 60, 55, 70] },
    { name: "实际", type: "area", data: [48, 65, 50, 75],
      fillOpacity: 0.3 }
]

3. 饼图+柱状组合

// 主图柱状,副图饼图
series: [
    { name: "总量", type: "column",
      data: [{y: 100, drilldown: "detail"}] },
    { name: "明细", type: "pie",
      center: ["80%", "20%"], size: 100,
      data: [
          { name: "A", y: 40 },
          { name: "B", y: 60 }
      ] }
]

4. 组合图应用场景

  • 销量与增长率(柱+线)
  • 计划与实际对比(柱+面积)
  • 温度与湿度(双线)
  • 访问量与转化率(柱+线,双轴)

5. 组合图最佳实践

// 每个系列指定 type 与 yAxis
series: [
    { type: "column", yAxis: 0, ... },
    { type: "line", yAxis: 1, ... }
]

// 图例清晰区分
legend: { enabled: true }

Highcharts 3D图

Highcharts 3D图

3D 图表增加立体效果,视觉冲击力强,适合演示与报告场景。

1. 引入 3D 模块

<!-- 必须先引入 highcharts,再引入 3d 模块 -->
<script src="https://cdn.bootcdn.net/ajax/libs/highcharts/11.3.0/highcharts.min.js"></script>
<script src="https://code.highcharts.com/modules/3d.js"></script>

2. 3D 柱状图

<div id="chart3d"></div>

<script>
Highcharts.chart("chart3d", {
    chart: {
        type: "column",
        options3d: {
            enabled: true,          // 开启 3D
            alpha: 15,              // 垂直旋转角度
            beta: 15,               // 水平旋转角度
            depth: 60               // 深度
        }
    },
    title: { text: "3D 柱状图" },
    xAxis: { categories: ["A", "B", "C", "D"] },
    yAxis: { title: { text: "数值" } },
    series: [{
        name: "数据",
        data: [30, 45, 25, 60]
    }]
});
</script>

3. 3D 饼图

Highcharts.chart("container", {
    chart: {
        type: "pie",
        options3d: {
            enabled: true,
            alpha: 45,
            beta: 0
        }
    },
    title: { text: "3D 饼图" },
    plotOptions: {
        pie: {
            depth: 35,              // 厚度
            allowPointSelect: true
        }
    },
    series: [{
        name: "占比",
        data: [
            { name: "A", y: 40 },
            { name: "B", y: 30 },
            { name: "C", y: 20 },
            { name: "D", y: 10 }
        ]
    }]
});

4. 3D 散点图

chart: {
    type: "scatter",
    options3d: {
        enabled: true,
        alpha: 10,
        beta: 30,
        depth: 200
    }
},
series: [{
    name: "数据",
    data: [[10,20,30],[15,25,10],[20,15,40],[30,10,25]]
}]

5. 3D 图表控制

// 添加旋转控制按钮
chart: {
    options3d: { enabled: true, alpha: 15, beta: 15 },
    events: {
        load: function() {
            this.setSize();  // 初始化
        }
    }
}

// 动态旋转
chart.options.chart.options3d.beta += 5;
chart.redraw();

Highcharts 测量图

Highcharts 测量图

测量图(仪表盘 gauge)用半圆仪表展示单一指标的当前值,适合 KPI 监控。

1. 基本仪表盘

<div id="gauge-chart"></div>

<script>
Highcharts.chart("gauge-chart", {
    chart: {
        type: "solidgauge",        // 实心仪表
        marginTop: 50
    },
    title: { text: "服务器负载" },
    pane: {
        startAngle: -90,
        endAngle: 90,
        background: [{
            outerRadius: "100%",
            innerRadius: "60%",
            backgroundColor: "#eee"
        }]
    },
    yAxis: {
        min: 0,
        max: 100,
        stops: [
            [0.3, "#2ecc71"],      // 0-30% 绿色
            [0.6, "#f1c40f"],      // 30-60% 黄色
            [1, "#e74c3c"]         // 60-100% 红色
        ],
        lineWidth: 0,
        tickWidth: 0,
        minorTickInterval: null,
        labels: { distance: 15 }
    },
    series: [{
        name: "负载",
        data: [65],
        dataLabels: {
            format: "<div style='font-size:30px'>{y}%</div>"
        }
    }]
});
</script>

2. 引入测量模块

// solidgauge 需要模块
<script src="https://code.highcharts.com/highcharts-more.js"></script>

// 或使用 classic gauge(指针式)
chart: { type: "gauge" }

3. 指针式仪表

Highcharts.chart("container", {
    chart: { type: "gauge" },
    title: { text: "速度表" },
    pane: {
        startAngle: -150,
        endAngle: 150
    },
    yAxis: {
        min: 0,
        max: 200,
        plotBands: [
            { from: 0, to: 80, color: "#2ecc71" },
            { from: 80, to: 140, color: "#f1c40f" },
            { from: 140, to: 200, color: "#e74c3c" }
        ]
    },
    series: [{
        name: "速度",
        data: [120],
        dial: { radius: "80%" }
    }]
});

4. 动态更新仪表

const chart = Highcharts.chart(...);

setInterval(() => {
    const value = Math.floor(Math.random() * 100);
    const point = chart.series[0].points[0];
    point.update(value);
}, 1000);

5. 测量图应用

  • CPU/内存/磁盘使用率
  • 服务器负载监控
  • 生产进度达成率
  • 库存水位

Highcharts 树状图(Treemap)

Highcharts 树状图(Treemap)

树状图(treemap)用矩形面积表示数据大小,支持层级结构,适合展示占比与分类聚合。

1. 引入模块

<script src="https://code.highcharts.com/modules/treemap.js"></script>

2. 基本树状图

<div id="treemap-chart"></div>

<script>
Highcharts.chart("treemap-chart", {
    chart: { type: "treemap" },
    title: { text: "部门预算占比" },
    series: [{
        name: "预算",
        data: [
            { name: "研发部", value: 40, color: "#3498db" },
            { name: "市场部", value: 25, color: "#2ecc71" },
            { name: "销售部", value: 20, color: "#f39c12" },
            { name: "行政部", value: 15, color: "#9b59b6" }
        ]
    }]
});
</script>

3. 层级树状图

series: [{
    name: "销售",
    data: [{
        name: "华东",
        id: "east",
        value: 50
    }, {
        name: "上海", parent: "east", value: 30
    }, {
        name: "江苏", parent: "east", value: 20
    }, {
        name: "华南",
        id: "south",
        value: 35
    }, {
        name: "广东", parent: "south", value: 25
    }, {
        name: "福建", parent: "south", value: 10
    }]
}]

4. 显示数据标签

plotOptions: {
    treemap: {
        dataLabels: {
            enabled: true,
            format: "{point.name}<br>{point.value}"
        },
        borderColor: "#fff",
        borderWidth: 2
    }
},
tooltip: {
    pointFormat: "{point.name}: {point.value} 万元"
}

5. 渐变颜色与点击

// 按数值渐变
colorAxis: {
    minColor: "#e8f4fd",
    maxColor: "#1e6fc2"
},

// 点击事件
series: [{
    type: "treemap",
    point: {
        events: {
            click: function() {
                alert("点击了 " + this.name);
            }
        }
    },
    data: [...]
}]

6. 应用场景

  • 预算/资源分配占比
  • 流量来源分布
  • 商品销售结构
  • 磁盘空间占用分析
第 1 / 15 节