坐标轴设置

在使用 Chart.js 创建图表时，坐标轴的设置至关重要。你可以自定义坐标轴的类型、刻度显示、网格线样式和标签格式，从而让图表更清晰、易读，满足不同数据展示需求。

(function() {
  const ctx = document.getElementById('axisChart').getContext('2d');
  const axisChart = new Chart(ctx, {
    type: 'line',
    data: {
      labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
      datasets: [{
        label: '销售额',
        data: [150, 200, 180, 220, 170, 210, 190],
        borderColor: 'rgb(75, 192, 192)',
        fill: false,
        tension: 0.3
      }]
    },
    options: {
      responsive: true,
      scales: {
        x: {
          type: 'category',
          ticks: {
            color: '#2c3e50',
            font: { size: 14, weight: 'bold' }
          },
          grid: {
            display: false
          },
          title: {
            display: true,
            text: '日期',
            color: '#34495e',
            font: { size: 16, weight: 'bold' }
          }
        },
        y: {
          type: 'linear',
          ticks: {
            color: '#2c3e50',
            font: { size: 14 }
          },
          grid: {
            color: 'rgba(0,0,0,0.1)',
            borderDash: [5, 5]
          },
          title: {
            display: true,
            text: '销售额（元）',
            color: '#34495e',
            font: { size: 16, weight: 'bold' }
          },
          beginAtZero: true
        }
      },
      plugins: {
        legend: { display: true },
        tooltip: { enabled: true }
      }
    }
  });
})();

loading