DEV Community · Show DEV9/8 06:1944 分
Orchid Charts:添加响应式收入图表
Add a responsive revenue chart with Orchid Charts
Orchid Charts 是一个用于仪表盘和报告的 SVG 图表 JavaScript 库。开发者只需提供标签和数值,即可生成带有坐标轴和工具提示的图表,且图表宽度会随容器自适应。通过 CSS 变量可自定义标签、网格和工具提示样式。文章展示了使用示例:安装 npm 包 @orchidsoftware/charts,在页面中添加 div 元素,然后通过 LineChart.make 方法创建折线图,并设置标题、标签和数据集。图表支持平滑线、渐变填充和自定义颜色,可随数据更新或导出为 SVG。该库包含 TypeScript 声明,零运行时依赖。