Sive
Chart.js 可视化
可视化官方

Chart.js 可视化

当用户需要在普通网页中快速实现轻量、响应式的基础统计图表，或明确要求使用 Chart.js 时，使用此 Skill。该库擅长：柱状图、折线图、面积图、饼图、环形图、散点图、气泡图、雷达图、极区图、混合图。不要用于复杂仪表盘、地图、关系网络、3D 场景或 AI 流式可视化。

去使用
hustcc
hustcc
浏览517
使用23

Skill 文件

SKILL.md
name
chartjs-viz
title
Chart.js 可视化
description
当用户需要在普通网页中快速实现轻量、响应式的基础统计图表，或明确要求使用 Chart.js 时，使用此 Skill。该库擅长：柱状图、折线图、面积图、饼图、环形图、散点图、气泡图、雷达图、极区图、混合图。不要用于复杂仪表盘、地图、关系网络、3D 场景或 AI 流式可视化。

Chart.js 可视化工具

核心原则

  • 选用最合适的图表类型匹配数据特征
  • 保持配置简洁，避免不必要的复杂度
  • 确保图表响应式，适配不同屏幕尺寸

图表类型

图表类型说明适用场景
Area Chart面积图累积趋势的直观展示
Bar Chart柱状图类别数据的数值比较
Bubble Chart气泡图三维数据（x, y, 大小）关系
Doughnut Chart环形图占比关系，中心可留白
Pie Chart饼图简单占比百分比展示
Line Chart折线图时间序列的趋势分析
Mixed Chart混合图多种图表类型的组合
Polar Area Chart极区图多维类别数据的雷达替代
Radar Chart雷达图多维指标的综合对比
Scatter Chart散点图双变量相关性分析

极简配置模板

基础折线图

javascript
new Chart(ctx, {  type: 'line',  data: {    labels: [],    datasets: [{      label: '数据',      data: [],      borderColor: 'rgb(75, 192, 192)',      tension: 0.1    }]  },  options: {    responsive: true,    plugins: { legend: { display: true } }  }});

基础柱状图

javascript
new Chart(ctx, {  type: 'bar',  data: {    labels: [],    datasets: [{      label: '数值',      data: [],      backgroundColor: 'rgba(54, 162, 235, 0.5)'    }]  },  options: {    responsive: true  }});

样式规范

  • 配色：使用 Chart.js 默认配色或自定义简洁色系
  • 字体：使用系统默认字体栈
  • 边距：保持 responsive: true 自动适配容器

安装

bash
npm install chart.js

或通过 CDN:

html
<​script src="https://cdn.jsdmirror.com/npm/chart.js"​><​/script​>
Ln 1, Col 1MarkdownSpaces: 2
No errors