当前位置：首页 > article >正文

使用char.js 柱形方式显示一年12个月的最高气温与最低气温

article 2024/11/18 17:28:29

<!DOCTYPE html>
<html>
<head>
  <title>气温图表</title>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <style>
    #myChart{
        width:800px;
        height: 400px;
    }
  </style>
</head>
<body>
  <canvas id="myChart"></canvas>
  <script>
    var tempData = {
      labels: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
      datasets: [
        {
          label: "最高气温",
          backgroundColor: "rgba(255,0,0,0.5)",
          borderColor: "red",
          borderWidth: 1,
          data: [20, 22, 25, 28, 30, 33, 35, 34, 32, 28, 24, 21]
        },
        {
          label: "最低气温",
          backgroundColor: "rgba(0,0,255,0.5)",
          borderColor: "blue",
          borderWidth: 1,
          data: [8, 8, 10, 15, 18, 22, 24, 24, 21, 16, 12, 9]
        }
      ]
    };

    var tempOptions = {
      responsive: true,
      maintainAspectRatio: false,
      scales: {
        yAxes: [{
          ticks: {
            beginAtZero: true
          }
        }]
      }
    };


    var ctx = document.getElementById("myChart").getContext("2d");
 
    var myChart = new Chart(ctx, {
      type: "bar",
      data: tempData,
      options: tempOptions
    });
  </script>
</body>
</html>

查看全文

http://www.kler.cn/a/147198.html