Highcharts仪表板全代码示例｜复制开发一云资源实时监控平台

Highcharts.js2026-05-06 12:04

这是一个基于 Highcharts Dashboards 开发的云服务器实时监控仪表盘，展示实例的 CPU、内存、磁盘、网络等监控数据，支持实例切换、实时轮询更新。

使用技术：Highcharts Dashboards + Highcharts 图表库，实现云监控可视化

javascript 复制代码 
Highcharts.setOptions({
    chart: {
        styledMode: true
    }
});
let board = void 0;
let instances = void 0;
let currentInstanceId = void 0;
const pollingCheckbox = document.getElementById('enablePolling');
const KPIOptions = {
    chart: {
        height: 165,
        margin: [0, 0, 0, 0],
        spacing: [0, 0, 0, 0],
        type: 'solidgauge'
    },
    yAxis: {
        min: 0,
        max: 100,
        stops: [
            [0.1, '#33A29D'], // green
            [0.5, '#DDDF0D'], // yellow
            [0.9, '#DF5353'] // red
        ]
    },
    pane: {
        background: {
            innerRadius: '80%',
            outerRadius: '100%'
        }
    },
    accessibility: {
        typeDescription: 'The gauge chart with 1 data point.'
    }
};

Highcharts.setOptions({
    credits: {
        enabled: false
    },
    title: {
        text: ''
    }
});

pollingCheckbox.onchange = async e => {
    if (e.target.checked) {
        // charts data
        (await board.dataPool.getConnector('charts')).startPolling();
        // KPI instances data
        (await board.dataPool.getConnector('instanceDetails')).startPolling();
    } else {
        // charts data
        (await board.dataPool.getConnector('charts')).stopPolling();
        // KPI instances data
        (await board.dataPool.getConnector('instanceDetails')).stopPolling();
    }
};

const setupDashboard = instanceId => {
    const instance = instances.find(
        instance => instance.InstanceId === instanceId
    ) || instances[0];

    // for polling option
    currentInstanceId = instance.InstanceId;

    board = Dashboards.board('container', {
        dataPool: {
            connectors: [{
                id: 'charts',
                type: 'JSON',
                firstRowAsNames: false,
                columnIds: [
                    'timestamp', 'readOpt', 'writeOpt', 'networkIn',
                    'networkOut', 'cpuUtilization'
                ],
                dataUrl: 'https://demo-live-data.highcharts.com/instance-details.json',
                beforeParse: function (data) {
                    const currentInstance = data.find(
                        inst => inst.InstanceId === currentInstanceId
                    ) || data;
                    return currentInstance.Details.map(
                        el => el
                    );
                }
            }, {
                id: 'instanceDetails',
                type: 'JSON',
                firstRowAsNames: false,
                orientantion: 'columns',
                columnIds: [
                    'index', 'CPUUtilization', 'MemoryUsage', 'DiskSizeGB',
                    'DiskUsedGB', 'DiskFreeGB', 'MediaGB', 'RootGB',
                    'Documents', 'Downloads'
                ],
                dataUrl: 'https://demo-live-data.highcharts.com/instances.json',
                beforeParse: function (data) {
                    const currentInstance = data.find(
                        inst => inst.InstanceId === currentInstanceId
                    ) || data;
                    const diskSpace = currentInstance.DiskSpace.RootDisk;
                    return [
                        [
                            0, // display one record on chart KPI / disk
                            currentInstance.CPUUtilization,
                            currentInstance.MemoryUsage,
                            diskSpace.SizeGB,
                            diskSpace.UsedGB,
                            diskSpace.FreeGB,
                            diskSpace.MediaGB,
                            diskSpace.RootGB,
                            diskSpace.Documents,
                            diskSpace.Downloads
                        ]
                    ];
                }
            }, {
                id: 'instances',
                type: 'JSON',
                firstRowAsNames: false,
                data: instances
            }]
        },
        gui: {
            layouts: [{
                rows: [{
                    id: 'instance-details',
                    cells: [{
                        id: 'instance'
                    }, {
                        id: 'zone'
                    }, {
                        id: 'ami'
                    }, {
                        id: 'os'
                    }]
                }, {
                    cells: [{
                        id: 'instances-table'
                    }, {
                        id: 'kpi-wrapper',
                        layout: {
                            rows: [{
                                cells: [{
                                    id: 'cpu'
                                }, {
                                    id: 'memory'
                                }]
                            }, {
                                cells: [{
                                    id: 'health'
                                }, {
                                    id: 'disk'
                                }]
                            }]
                        }
                    }]
                }, {
                    cells: [{
                        id: 'disk-usage'
                    }, {
                        id: 'cpu-utilization'
                    }]
                }, {
                    cells: [{
                        id: 'network-opt'
                    }, {
                        id: 'disk-opt'
                    }]
                }]
            }]
        },
        components: [{
            renderTo: 'instance',
            type: 'HTML',
            title: 'Instance type:',
            elements: [{
                tagName: 'img',
                /* https://awsicons.dev/ */
                src: 'https://www.highcharts.com/samples/graphics/dashboards/cloud-monitoring/instance-ico.svg'
            }, {
                tagName: 'p',
                textContent: instance.InstanceType
            }]
        }, {
            renderTo: 'zone',
            type: 'HTML',
            title: 'Zone:',
            elements: [{
                tagName: 'img',
                /* https://awsicons.dev/ */
                src: 'https://www.highcharts.com/samples/graphics/dashboards/cloud-monitoring/zone-ico.svg'
            }, {
                tagName: 'p',
                textContent: instance.Zone
            }]
        }, {
            renderTo: 'ami',
            type: 'HTML',
            title: 'AMI:',
            elements: [{
                tagName: 'img',
                /* https://awsicons.dev/ */
                src: 'https://www.highcharts.com/samples/graphics/dashboards/cloud-monitoring/ami-ico.svg'
            }, {
                tagName: 'p',
                textContent: instance.AMI
            }]
        }, {
            renderTo: 'os',
            type: 'HTML',
            title: 'OS:',
            elements: [{
                tagName: 'img',
                /* https://awsicons.dev/ */
                src: 'https://www.highcharts.com/samples/graphics/dashboards/cloud-monitoring/os-ico.svg'
            }, {
                tagName: 'p',
                textContent: instance.OS
            }]
        }, {
            renderTo: 'disk-usage',
            title: 'Disk usage',
            type: 'Highcharts',
            connector: {
                id: 'instanceDetails',
                columnAssignment: [{
                    seriesId: 'media-gb',
                    data: ['x', 'MediaGB']
                }, {
                    seriesId: 'root-gb',
                    data: ['x', 'RootGB']
                }, {
                    seriesId: 'documents',
                    data: ['x', 'Documents']
                }, {
                    seriesId: 'downloads',
                    data: ['x', 'Downloads']
                }]
            },
            chartOptions: {
                xAxis: {
                    min: -0.5,
                    max: 3.5,
                    showFirstLabel: false,
                    showLastLabel: false,
                    type: 'category',
                    categories: ['MediaGB', 'RootGB', 'Documents', 'Downloads'],
                    accessibility: {
                        description: 'Disk categories'
                    }
                },
                series: [{
                    name: 'MediaGB',
                    id: 'media-gb',
                    pointStart: 0,
                    pointPlacement: -0.3
                }, {
                    name: 'RootGB',
                    id: 'root-gb',
                    pointStart: 1,
                    pointPlacement: -0.1
                }, {
                    name: 'Documents',
                    id: 'documents',
                    pointStart: 2,
                    pointPlacement: 0.1
                }, {
                    name: 'Downloads',
                    id: 'downloads',
                    pointStart: 3,
                    pointPlacement: 0.4
                }],
                yAxis: {
                    title: {
                        text: 'GB'
                    },
                    accessibility: {
                        description: 'Gigabytes'
                    }
                },
                legend: {
                    enabled: false
                },
                chart: {
                    type: 'bar'
                },
                tooltip: {
                    headerFormat: '',
                    valueSuffix: ' Gb'
                },
                plotOptions: {
                    series: {
                        relativeXValue: true,
                        pointRange: 1,
                        pointPadding: 0,
                        groupPadding: 0,
                        pointWidth: 40,
                        dataLabels: {
                            enabled: true,
                            format: '{y} GB'
                        }
                    }
                },
                lang: {
                    accessibility: {
                        chartContainerLabel: 'Disk usage. Highcharts ' +
                            'interactive chart.'
                    }
                },
                accessibility: {
                    description: 'The chart is displaying space on disk'
                }
            }
        }, {
            renderTo: 'cpu-utilization',
            title: 'CPU utilization',
            type: 'Highcharts',
            connector: {
                id: 'charts',
                columnAssignment: [{
                    seriesId: 'cpu-utilization',
                    data: ['timestamp', 'cpuUtilization']
                }]
            },
            sync: {
                highlight: true
            },
            chartOptions: {
                chart: {
                    type: 'spline'
                },
                series: [{
                    name: 'CPU utilization',
                    id: 'cpu-utilization'
                }],
                xAxis: {
                    type: 'datetime',
                    accessibility: {
                        description: 'Days'
                    }
                },
                yAxis: {
                    min: 0,
                    max: 100,
                    title: {
                        text: 'Percents'
                    },
                    accessibility: {
                        description: 'Percents'
                    }
                },
                legend: {
                    enabled: false
                },
                tooltip: {
                    valueSuffix: '%'
                },
                accessibility: {
                    description: 'The chart is displaying CPU usage',
                    point: {
                        valueDescriptionFormat: 'percents'
                    }
                }
            }
        }, {
            renderTo: 'cpu',
            type: 'KPI',
            connector: {
                id: 'instanceDetails'
            },
            columnId: 'CPUUtilization',
            chartOptions: {
                ...KPIOptions,
                plotOptions: {
                    series: {
                        className: 'highcharts-live-kpi',
                        dataLabels: {
                            format: '<div style="text-align:center; ' +
                                'margin-top: -20px">' +
                            '<div style="font-size:1.2em;">{y}%</div>' +
                            '<div style="font-size:14px; opacity:0.4; ' +
                            'text-align: center;">CPU</div>' +
                            '</div>',
                            useHTML: true
                        }
                    }
                },
                series: [{
                    name: 'CPU utilization',
                    innerRadius: '80%',
                    data: [{
                        colorIndex: '100'
                    }],
                    radius: '100%'
                }],
                xAxis: {
                    accessibility: {
                        description: 'Days'
                    }
                },
                lang: {
                    accessibility: {
                        chartContainerLabel: 'CPU usage. Highcharts ' +
                            'interactive chart.'
                    }
                },
                tooltip: {
                    valueSuffix: '%'
                }
            }
        }, {
            renderTo: 'memory',
            type: 'KPI',
            connector: {
                id: 'instanceDetails'
            },
            columnId: 'MemoryUsage',
            chartOptions: {
                ...KPIOptions,
                yAxis: {
                    min: 0,
                    max: 2048,
                    stops: [
                        [0.1, '#33A29D'], // green
                        [0.5, '#DDDF0D'], // yellow
                        [0.9, '#DF5353'] // red
                    ]
                },
                plotOptions: {
                    series: {
                        className: 'highcharts-live-kpi',
                        dataLabels: {
                            format: '<div style="text-align:center; ' +
                                'margin-top: -20px">' +
                            '<div style="font-size:1.2em;">{y} MB</div>' +
                            '<div style="font-size:14px; opacity:0.4; ' +
                            'text-align: center;">Memory</div>' +
                            '</div>',
                            useHTML: true
                        }
                    }
                },
                series: [{
                    name: 'Memory usage',
                    innerRadius: '80%',
                    data: [{
                        colorIndex: '100'
                    }],
                    radius: '100%'
                }],
                lang: {
                    accessibility: {
                        chartContainerLabel: 'Memory usage. Highcharts ' +
                            'interactive chart.'
                    }
                },
                tooltip: {
                    valueSuffix: ' MB'
                }
            }
        }, {
            renderTo: 'health',
            type: 'HTML',
            class: 'health-indicator',
            elements: [{
                tagName: 'div',
                class: 'health-wrapper highcharts-' + instance.HealthIndicator +
                    '-icon',
                attributes: {
                    'aria-label': 'Health: ' + instance.HealthIndicator,
                    role: 'img'
                }
            }, {
                tagName: 'div',
                class: 'health-title',
                textContent: 'Health'
            }]
        }, {
            renderTo: 'disk',
            type: 'KPI',
            connector: {
                id: 'instanceDetails'
            },
            columnId: 'DiskUsedGB',
            chartOptions: {
                ...KPIOptions,
                plotOptions: {
                    series: {
                        dataLabels: {
                            format: '<div style="text-align:center; ' +
                                'margin-top: -20px">' +
                            '<div style="font-size:1.2em;">{y} GB</div>' +
                            '<div style="font-size:14px; opacity:0.4; ' +
                            'text-align: center;">Disk space</div>' +
                            '</div>',
                            useHTML: true
                        }
                    }
                },
                series: [{
                    name: 'Disk usage',
                    innerRadius: '80%',
                    data: [{
                        colorIndex: '100'
                    }],
                    radius: '100%'
                }],
                tooltip: {
                    valueSuffix: ' Gb'
                },
                lang: {
                    accessibility: {
                        chartContainerLabel: 'Disk usage. Highcharts ' +
                            'interactive chart.'
                    }
                }
            }
        }, {
            renderTo: 'network-opt',
            type: 'Highcharts',
            title: 'Network (bytes)',
            connector: {
                id: 'charts',
                columnAssignment: [{
                    seriesId: 'in',
                    data: ['timestamp', 'networkIn']
                }, {
                    seriesId: 'out',
                    data: ['timestamp', 'networkOut']
                }]
            },
            sync: {
                highlight: true
            },
            chartOptions: {
                chart: {
                    type: 'spline'
                },
                xAxis: {
                    type: 'datetime',
                    accessibility: {
                        description: 'Days'
                    }
                },
                yAxis: {
                    title: {
                        text: 'Bytes'
                    },
                    accessibility: {
                        description: 'Bytes'
                    }
                },
                legend: {
                    labelFormatter: function () {
                        const result =
                            this.name.replace(/([A-Z])/g, ' $1').toLowerCase();
                        return result.charAt(0).toUpperCase() + result.slice(1);
                    }
                },
                tooltip: {
                    valueDecimals: 0,
                    valueSuffix: ' bytes'
                },
                accessibility: {
                    description: `The chart is displaying amount of in and out
                                network operations`,
                    point: {
                        valueDescriptionFormat: 'bytes'
                    }
                },
                series: [{
                    name: 'network in',
                    id: 'in'
                }, {
                    name: 'network out',
                    id: 'out'
                }]
            }
        }, {
            renderTo: 'disk-opt',
            type: 'Highcharts',
            title: 'Disk operations',
            connector: {
                id: 'charts',
                columnAssignment: [{
                    seriesId: 'read',
                    data: ['timestamp', 'readOpt']
                }, {
                    seriesId: 'write',
                    data: ['timestamp', 'writeOpt']
                }]
            },
            sync: {
                highlight: true
            },
            chartOptions: {
                chart: {
                    type: 'column'
                },
                xAxis: {
                    type: 'datetime',
                    accessibility: {
                        description: 'Days'
                    }
                },
                tooltip: {
                    valueDecimals: 0,
                    valueSuffix: ' operations'
                },
                yAxis: {
                    title: {
                        text: 'Operations'
                    },
                    accessibility: {
                        description: 'Operations'
                    }
                },
                legend: {
                    labelFormatter: function () {
                        const result =
                            this.name.replace(/([A-Z])/g, ' $1').toLowerCase();
                        return result.charAt(0).toUpperCase() + result.slice(1);
                    }
                },
                accessibility: {
                    description: `The chart is displaying amount of in and out
                                operations on disk`,
                    point: {
                        valueDescriptionFormat: 'operations'
                    }
                }
            }
        }, {
            renderTo: 'instances-table',
            type: 'Grid',
            title: 'Instances',
            gridOptions: {
                credits: {
                    enabled: false
                },
                rendering: {
                    rows: {
                        strictHeights: true
                    }
                },
                header: [
                    'InstanceId', 'InstanceType', 'PublicIpAddress',
                    'State', 'HealthIndicator'
                ],
                columns: [{
                    id: 'InstanceId',
                    width: '31%',
                    header: {
                        format: 'ID'
                    }
                }, {
                    id: 'InstanceType',
                    width: '19%',
                    header: {
                        format: 'Type'
                    }
                }, {
                    id: 'PublicIpAddress',
                    width: '24%',
                    header: {
                        format: 'Public IP'
                    }
                }, {
                    id: 'State',
                    width: '16%'
                }, {
                    id: 'HealthIndicator',
                    header: {
                        format: 'Health'
                    },
                    useHTML: true,
                    cells: {
                        formatter: function () {
                            const val = this.value;
                            return `<img src="https://www.highcharts.com/samples/graphics/dashboards/cloud-monitoring/${
                                val.toLowerCase()
                            }-ico.svg" alt="${val}"/>`;
                        }
                    }
                }],
                events: {
                    cell: {
                        click: async function () {
                            const enabledPolling = pollingCheckbox.checked;
                            if (enabledPolling) {
                                // stop polling when is enabled
                                await pollingCheckbox.click();
                            }
                            board.destroy();
                            setupDashboard(
                                this.row.cells[0].value
                            );

                            // run polling when was enabled
                            if (enabledPolling) {
                                await pollingCheckbox.click();
                            }
                        }
                    }
                }
            },
            connector: {
                id: 'instances'
            },
            events: {
                mount: function () {
                    const component =
                        this.board.getComponentByCellId('instances-table');
                    setTimeout(() => {
                        component.grid.viewport.rows.find(
                            row => row.cells[0].value === instance.InstanceId
                        ).htmlElement.classList.add('current');
                    }, 1);
                }
            }
        }]
    });
};

// Init
(async () => {
    // load init list of intances
    instances = await fetch(
        'https://demo-live-data.highcharts.com/instances.json'
    ).then(response => response.json());

    setupDashboard();
    // run polling
    await pollingCheckbox.click();
})();

功能梳理

  1. 全局配置：启用 Highcharts 样式模式、隐藏版权信息
  2. 实时轮询：勾选复选框后自动定时拉取最新监控数据
  3. 多实例切换：点击表格中的实例，刷新整个仪表盘展示对应数据
  4. 可视化组件
    • 基础信息卡片：实例类型、区域、AMI、操作系统
    • KPI 仪表盘：CPU 利用率、内存使用率、磁盘使用率
    • 健康状态指示器
    • 趋势图表：CPU、网络、磁盘操作
    • 实例列表表格
相关推荐
YJlio8 小时前
2026年5月5日60秒读懂世界：五一档票房、油价调整、汤姆斯杯夺冠与全球风险观察
数据分析·django·飞书·仪表盘·多维表格·图表联动
Highcharts.js20 小时前
数据处理新革命产品发布：Highcharts Orbit 公测-开启图表数据分析的新维度
信息可视化·数据挖掘·数据分析·highcharts
Highcharts.js5 天前
线形比赛积分增长或竞赛图｜Highcharts企业图表代码示列
开发语言·前端·javascript·折线图·highcharts·竞赛图
Highcharts.js6 天前
React 开发实战：如何使用 useEffect 为 Highcharts 注入实时数据
前端·javascript·react.js·开发实战·实时数据·highcharts·轮询数据
Highcharts.js8 天前
实战指南：如何构建一套全平台适配的响应式图表系统？
前端·javascript·highcharts·实战代码·响应式图表
Highcharts.js9 天前
赋能金融 SaaS｜如何利用 Highcharts 与 Morningstar 数据构建顶级分析仪表盘
前端·金融·echarts·saas·bi·highcharts
Highcharts.js9 天前
技术组合分析：Highcharts 的数据集成能力解析
java·前端·金融·echarts·saas·bi·highcharts
Highcharts.js10 天前
用Highcharts如何动态向一个序列添加点
前端·javascript·react.js·highcharts
Highcharts.js10 天前
可视化图表代码学习｜如何绘制一条正弦波
信息可视化·图形渲染·highcharts
热门推荐
01要裂开了！ChatGPT要手机号验证了？注册Codex要求验证电话号码怎么办？2026年登陆Codex要手机号验证的解决办法02GitHub 镜像站点03零基础教你claude code 接入 deepseek V404Codex 接入 DeepSeek API 完整配置文档05Linux 核弹级高危漏洞 CVE-2026-31431 完整修复指南06CVE-2026-31431 (Copy Fail) 漏洞复现与验证记录07裂开！ChatGPT 居然开始要手机号验证，附详细解决方法08【AI】2026 年具身智能模型和世界模型总结09CC-Switch & Claude 基于 Linux 服务器安装使用指南10VScode的claude code插件报错command ‘claude-vscode.editor.openLast‘ not found