完整可直接预览 HTML代码示例!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title服务器负载实时监控条形图/title !-- 完全使用你指定的CDN脚本 -- script srchttps://code.highcharts.com/highcharts.js/script script srchttps://code.highcharts.com/modules/data.js/script script srchttps://code.highcharts.com/modules/exporting.js/script style #container { width: 100%; height: 600px; margin: 10px auto; } /style /head body !-- 你提供的容器结构 -- div idcontainer/div script Highcharts.chart(container, { chart: { type: bar, height: 600 }, title: { text: 服务器资源监控面板 }, legend: { enabled: false }, subtitle: { text: 各实例负载实时占比 }, // 远程CSV数据源每秒自动轮询刷新 data: { csvURL: https://demo-live-data.highcharts.com/vs-load.csv, enablePolling: true, dataRefreshRate: 1 }, plotOptions: { bar: { colorByPoint: true }, series: { // 负载分级配色绿色正常→黄色预警→红色过载 zones: [{color: #4CAF50, value: 0}, {color: #8BC34A, value: 10}, {color: #CDDC39, value: 20}, {color: #CDDC39, value: 30}, {color: #FFEB3B, value: 40}, {color: #FFEB3B, value: 50}, {color: #FFC107, value: 60}, {color: #FF9800, value: 70}, {color: #FF5722, value: 80}, {color: #F44336, value: 90}, {color: #F44336, value: Number.MAX_VALUE}], dataLabels: { enabled: true, format: {point.y:.0f}% } } }, tooltip: { valueDecimals: 1, valueSuffix: % }, xAxis: { type: category, labels: { style: { fontSize: 10px } } }, yAxis: { max: 100, title: false, // Y轴分层预警背景色 plotBands: [ {from: 0, to: 30, color: rgba(0,255,21,0.2)}, {from: 30, to: 70, color: rgba(255,234,0,0.2)}, {from: 70, to: 100, color: rgba(255,0,38,0.2)} ] } }); /script /body /html本服务器负载监控案例充分体现 Highcharts 面向运维实时监控场景的轻量化动态可视化能力解决传统监控图表需自行封装轮询、阈值配色复杂、多实例对比不直观的痛点原生远程数据自动轮询降低开发成本内置 data 模块原生支持 CSV 在线地址、定时轮询刷新仅配置csvURL、enablePolling、dataRefreshRate三行参数即可实现实时更新无需封装 axios/fetch 定时器前后端对接极简。成熟阈值分区着色预警体系 series.zones 可自定义任意多段数值区间每个区间独立配置颜色负载变化时条形自动变色搭配 yAxis.plotBands 底层预警色块双层视觉提醒异常实例一眼识别。统一百分比标尺多实例横向高效对比 Y 轴固定 0~100 百分比所有服务器条形使用同一标准标尺横向排布一目了然适合几十上百台实例集群批量监控。运维友好轻量化交互 条形内置百分比标签、悬浮提示精确小数隐藏冗余图例布局紧凑支持固定高度适配大屏、监控后台页面嵌入。拓展性强适配各类时序监控场景 可替换接口 JSON 数据源、自定义刷新间隔、调整预警阈值配色无缝迁移至 CPU、内存、磁盘、网络流量、设备工况等各类实时指标监控。图表类型横向分类条形图bar实时动态轮询数据源 阈值分区着色预警运维监控专用动态图表。核心功能拆解在线 CSV 远程数据源自动轮询通过modules/data.js模块拉取线上 CSV 接口enablePolling:true开启轮询dataRefreshRate:1每秒自动更新图表无需手动请求接口、前端不用写定时器。按数值阈值自动变色zones 分区色带0~30 绿色空闲正常、30~70 黄色负载偏高、70~100 红色高危过载条形颜色跟随负载实时自动切换直观识别异常实例。Y 轴背景预警色块分层plotBands在坐标轴底层渲染半透明三色背景和条形颜色形成双层预警提示大屏远距离也能快速区分负载区间。单条独立配色 内置百分比标签colorByPoint:true每个服务器条形独立渲染条形末端直接展示负载百分比数值无需悬浮查看。固定 Y 轴 0~100 百分比区间 统一负载百分比标尺所有实例横向长度对比标准统一便于横向对比多台服务器压力。极简无图例布局 隐藏图例依靠颜色区间天然区分负载等级页面干净适配运维监控大屏。适用业务场景服务器 / 云实例 CPU、内存、磁盘负载实时监控大屏容器集群 K8s Pod 资源使用率动态看板设备工况、生产线负荷分级预警可视化实时在线数据报表CSV / 接口自动拉取刷新机房运维、后台监控系统嵌入式数据卡片