仅将颜色应用于Chart.js折线图的下部

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<canvas id="myChart"></canvas>

// 获取canvas元素
var ctx = document.getElementById('myChart').getContext('2d');

// 配置折线图的数据和样式
var chartData = {
  labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
  datasets: [{
    label: 'My Dataset',
    data: [10, 20, 30, 40, 50, 60, 70],
    backgroundColor: 'rgba(0, 0, 255, 0.2)', // 设置折线图下部的背景颜色
    borderColor: 'rgba(0, 0, 255, 1)', // 设置折线的边框颜色
    borderWidth: 1 // 设置折线的边框宽度
  }]
};

// 创建折线图实例
var myChart = new Chart(ctx, {
  type: 'line',
  data: chartData,
  options: {
    responsive: true,
    scales: {
      y: {
        beginAtZero: true
      }
    }
  }
});