菜鸟教程在线编辑器

AI 编程工具
 
                <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/Chart.js/3.7.1/chart.js"></script>
</head>
<body>

<canvas id="myChart" width="400" height="400"></canvas>
<script>
const ctx = document.getElementById('myChart');
const data = {
  labels: [
    '一月份',
    '二月份',
    '三月份',
    '四月份'
  ],
  datasets: [{
    type: 'bar',
    label: '柱形图数据集',
    data: [45, 49,52, 48],
    borderColor: 'rgb(255, 99, 132)',
    backgroundColor: 'rgba(255, 99, 132, 0.2)'
  }, {
    type: 'line',
    label: '折线图数据集',
    data: [50, 40, 45, 49],
    fill: false,
    borderColor: 'rgb(54, 162, 235)'
  }]
};
const config = {
  type: 'scatter',
  data: data,
  options: {
    responsive: true, // 设置图表为响应式，根据屏幕窗口变化而变化
    maintainAspectRatio: false,// 保持图表原有比例
    scales: {
      y: {
        beginAtZero: true
      }
    }
  }
};
const myChart = new Chart(ctx, config);
</script>

</body>
</html>
              