如何在Highcharts中创建简单的KPI卡片（Tile/Card）

要实现类似PowerBI的方形KPI卡片（中心显示计数/求和数值），可以通过以下方式利用Highcharts完成：

核心思路 #

借助Highcharts的空图表容器，隐藏所有默认图表元素（坐标轴、网格、图例等），仅保留标题和副标题来居中展示KPI数值与描述，同时通过CSS设置容器为方形卡片样式。

实现代码 #

HTML 容器

<div id="kpi-card" style="width: 250px; height: 250px; margin: 20px; border-radius: 8px; background: #f8f9fa; box-shadow: 0 2px 4px rgba(0,0,0,0.1);"></div>

JavaScript 初始化

Highcharts.chart('kpi-card', {
    chart: {
        type: 'scatter',
        backgroundColor: 'transparent',
        margin: [0, 0, 0, 0]
    },
    title: {
        text: '1,250', // 替换为你的KPI数值
        align: 'center',
        verticalAlign: 'middle',
        style: {
            fontSize: '48px',
            fontWeight: 'bold',
            color: '#2c3e50'
        },
        y: 0
    },
    subtitle: {
        text: '总访问量', // 替换为KPI描述
        align: 'center',
        verticalAlign: 'middle',
        style: {
            fontSize: '16px',
            color: '#7f8c8d'
        },
        y: 50
    },
    xAxis: { visible: false },
    yAxis: { visible: false },
    legend: { enabled: false },
    tooltip: { enabled: false },
    series: [{ data: [] }]
});

自定义调整方向 #

• 修改容器的width和height可以调整卡片大小
• 修改background、box-shadow属性自定义卡片外观
• 调整标题的fontSize、color来改变数值样式
• 替换title.text和subtitle.text为实际业务数据

内容的提问来源于stack exchange，提问作者Tonedefdom