返回技能列表

chartjs-cdn-quick-start

vamseeachanta
更新于 Yesterday
1 次查看
3
2
3
在 GitHub 上查看
其他designdata

关于

This skill provides quick-start code snippets for integrating Chart.js via CDN, NPM, and ES modules. It enables developers to rapidly embed Chart.js for data visualization without complex setup. Use this for the fastest way to add interactive charts using simple script tags or import statements.

快速安装

Claude Code

推荐
主要方式
npx skills add vamseeachanta/workspace-hub -a claude-code
插件命令备选方式
/plugin add https://github.com/vamseeachanta/workspace-hub
Git 克隆备选方式
git clone https://github.com/vamseeachanta/workspace-hub.git ~/.claude/skills/chartjs-cdn-quick-start

在 Claude Code 中复制并粘贴此命令以安装该技能

GitHub 仓库

vamseeachanta/workspace-hub
路径: .claude/skills/data/visualization/chartjs/cdn-quick-start
0

相关推荐技能

d3js

其他

这个Skill让开发者能够使用D3.js创建完全自定义的交互式数据可视化,适用于需要精细控制SVG元素和复杂动画的场景。它特别适合构建标准图表库无法实现的独特可视化效果,并提供完整的数据绑定和DOM操作能力。当项目需要高度定制化的交互图表而非快速简单的标准图表时,这是理想选择。

查看技能

plotly-vertical-legends-avoid-toolbar-clash

其他

这个Skill解决了Plotly图表中顶部水平图例与工具栏冲突的问题,通过将图例垂直放置在右侧来优化布局。它提供了具体的代码配置,包括边距调整和紧凑的垂直间距设置,确保图例与交互工具不重叠。特别适用于多求解器对比等复杂图表场景,通过"标题优先"的轨迹排序方式,使图例分组更清晰易用。

查看技能

highcharts-1-basic-line-chart

其他

这是一个用于创建基础折线图的Highcharts子技能,提供了完整的HTML实现模板。开发者可以直接复制代码快速生成带有标题、坐标轴和单数据系列的可视化图表。适用于需要在网页中嵌入简单销售趋势或数据变化展示的场景。

查看技能

chartjs-1-use-responsive-containers

其他

这个Skill提供了Chart.js图表实现响应式设计的关键代码示例。它展示了如何通过容器设置和配置选项使图表自适应不同屏幕尺寸,并包含销毁重建图表的最佳实践。开发者可以快速复制这些代码片段来确保数据可视化在不同设备上正确显示。

查看技能