折线图 Line

折线图用于展示数据随时间或类别的变化趋势。使用 Chart.js 可以轻松绘制丰富且美观的折线图，满足多种数据可视化需求。

基础折线图示例

下面示例展示了如何创建一个响应式折线图，包含数据点、颜色和简单动画效果。

(function() {
  const ctx = document.getElementById('myChart').getContext('2d');
  const myChart = new Chart(ctx, {
    type: 'line',
    data: {
      labels: ['一月', '二月', '三月', '四月', '五月', '六月', '七月'],
      datasets: [{
        label: '示例数据',
        data: [65, 59, 80, 81, 56, 55, 40],
        fill: false,
        borderColor: 'rgb(75, 192, 192)',
        tension: 0.1
      }]
    },
    options: {
      responsive: true,
      plugins: {
        legend: { display: true },
        tooltip: { enabled: true }
      }
    }
  });
})();

演示

折线图示例

loading