自定义颜色与样式

通过 Chart.js 提供的丰富配置，可以轻松自定义图表的颜色和样式。你可以设置数据集的背景色、边框色、线条样式，甚至调整图例和坐标轴的字体颜色和大小，打造符合需求的个性化图表。

(function() {
  const ctx = document.getElementById('customStyleChart').getContext('2d');
  const customStyleChart = new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ['红', '蓝', '黄', '绿', '紫', '橙'],
      datasets: [{
        label: '自定义样式数据',
        data: [10, 20, 15, 25, 18, 30],
        backgroundColor: [
          'rgba(255, 99, 132, 0.8)',
          'rgba(54, 162, 235, 0.8)',
          'rgba(255, 206, 86, 0.8)',
          'rgba(75, 192, 192, 0.8)',
          'rgba(153, 102, 255, 0.8)',
          'rgba(255, 159, 64, 0.8)'
        ],
        borderColor: [
          'rgba(255, 99, 132, 1)',
          'rgba(54, 162, 235, 1)',
          'rgba(255, 206, 86, 1)',
          'rgba(75, 192, 192, 1)',
          'rgba(153, 102, 255, 1)',
          'rgba(255, 159, 64, 1)'
        ],
        borderWidth: 2
      }]
    },
    options: {
      responsive: true,
      plugins: {
        legend: {
          display: true,
          labels: {
            color: '#333',
            font: {
              size: 14,
              weight: 'bold'
            }
          }
        },
        tooltip: {
          enabled: true,
          backgroundColor: 'rgba(0,0,0,0.7)',
          titleFont: { size: 16 },
          bodyFont: { size: 14 }
        }
      },
      scales: {
        x: {
          ticks: { color: '#555', font: { size: 12 } },
          grid: { color: '#eee' }
        },
        y: {
          ticks: { color: '#555', font: { size: 12 } },
          grid: { color: '#eee' }
        }
      }
    }
  });
})();

loading