[{"data":1,"prerenderedAt":21},["ShallowReactive",2],{"article-chart-js-d3-js":3},{"id":4,"title":5,"slug":6,"description":7,"content":8,"coverImage":9,"tags":10,"category":7,"categoryName":7,"draft":12,"reviewStatus":13,"viewCount":14,"readingTime":15,"author":16,"createdAt":19,"updatedAt":20,"series":7},"23","数据可视化入门：从 Chart.js 到 D3.js","chart-js-d3-js",null,"## 数据可视化的重要性\n\n一图胜千言。好的数据可视化能让复杂的数据变得一目了然。\n\n## Chart.js：快速上手\n\nChart.js 是最简单的前端图表库，适合基本图表需求。\n\n```javascript\nnew Chart(ctx, {\n  type: 'bar',\n  data: { labels: ['Q1','Q2','Q3','Q4'], datasets: [{ data: [12, 19, 3, 5] }] }\n});\n```\n\n## D3.js：无限可能\n\nD3.js 提供了底层的 SVG 操作能力，适合复杂定制化需求。\n\n学习曲线陡峭，但一旦掌握，你可以创建任何你能想象的可视化效果。\n\n## 选择建议\n\n- 简单报表：Chart.js\n- 中等定制：ECharts\n- 极致定制：D3.js\n- React 项目：Recharts \u002F Victory","https:\u002F\u002Fpicsum.photos\u002Fseed\u002Fdataviz6\u002F800\u002F400",[11],"前端",false,"APPROVED",12,1,{"id":17,"username":18},"4","c","2026-05-16T18:23:13.088991","2026-05-28T00:40:46.468025",1780059956182]