JavaScript图表库介绍[编辑 | 编辑源代码]

JavaScript图表库是一组预先构建的工具和函数，用于在网页中创建交互式数据可视化。这些库允许开发者通过简单的API调用将复杂的数据转换为直观的图表（如折线图、柱状图、饼图等），无需从零开始实现绘图逻辑。在数据分析和前端开发中，图表库是展示趋势、比较和分布的高效工具。

核心概念[编辑 | 编辑源代码]

图表库通常基于以下技术栈构建：

SVG（可缩放矢量图形）或 Canvas（HTML5绘图API）作为底层渲染引擎
数据绑定机制将JavaScript数组/对象映射为可视化元素
响应式设计适配不同屏幕尺寸
交互功能（悬停提示、缩放、点击事件等）

主流图表库对比[编辑 | 编辑源代码]

以下是2023年最流行的JavaScript图表库特性对比：

图表库特性矩阵
库名称	渲染方式	开源协议	典型用例
Chart.js	Canvas	MIT	快速集成基础图表
D3.js	SVG	BSD	高度自定义可视化
ECharts	Canvas/SVG	Apache	大数据量可视化
Highcharts	SVG	商业授权	企业级仪表盘

代码示例[编辑 | 编辑源代码]

Chart.js基础示例[编辑 | 编辑源代码]

// 1. 准备数据
const salesData = {
  labels: ['Q1', 'Q2', 'Q3', 'Q4'],
  datasets: [{
    label: '年度销售额（万元）',
    data: [120, 190, 170, 220],
    backgroundColor: 'rgba(54, 162, 235, 0.5)'
  }]
};

// 2. 创建柱状图
const ctx = document.getElementById('salesChart').getContext('2d');
new Chart(ctx, {
  type: 'bar',
  data: salesData,
  options: {
    responsive: true,
    scales: {
      y: {
        beginAtZero: true
      }
    }
  }
});

输出效果：

D3.js进阶示例[编辑 | 编辑源代码]

// 创建SVG容器
const svg = d3.select("#chart")
  .append("svg")
  .attr("width", 500)
  .attr("height", 300);

// 绘制散点图
svg.selectAll("circle")
  .data(dataset)
  .enter()
  .append("circle")
  .attr("cx", d => xScale(d.x))
  .attr("cy", d => yScale(d.y))
  .attr("r", 5)
  .style("fill", "steelblue");