HTML5 图形和数据可视化秘籍

由于原文章已经提供了完整的解决方案，这里我们只需提供核心代码实例：

<!-- 图表容器 -->
<div id="chart-container"></div>
 
<!-- 图表库的引入 -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 
<script>
  // 图表配置
  const config = {
    type: 'line',
    data: {
      labels: ['一月', '二月', '三月', '四月', '五月', '六月'],
      datasets: [{
        label: '销售数据',
        data: [10, 20, 30, 40, 50, 60],
        backgroundColor: 'rgba(255, 99, 132, 0.2)',
        borderColor: 'rgba(255, 99, 132, 1)',
        borderWidth: 1
      }]
    },
    options: {
      scales: {
        y: {
          beginAtZero: true
        }
      }
    }
  };
 
  // 初始化图表
  const ctx = document.getElementById('chart-container').getContext('2d');
  const myChart = new Chart(ctx, config);
</script>

这段代码展示了如何使用Chart.js库创建一个基本的折线图。首先，我们在HTML中定义了一个图表容器。然后通过<script>标签引入了Chart.js库。接下来，我们定义了一个图表配置对象config，包括图表类型、数据集、标签等。最后，我们使用这个配置对象初始化了一个新的Chart实例，并将其渲染到我们的容器中。