菜鸟教程在线编辑器

AI 编程工具
 
                <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.net/Chart.js/3.9.1/chart.js"></script>
</head>
<body>

<canvas id="myChart" width="400" height="200"></canvas>
<script>
const ctx = document.getElementById('myChart');
const labels = ['一月份', '二月份', '三月份','四月份', '五月份', '六月份', '七月份'];  // 设置 X 轴上对应的标签
const data = {
  labels: labels,
  datasets: [{
    label: '我的第一个折线图',
    data: [65, 59, 80, 81, 56, 55, 40],
    fill: false,
    borderColor: 'rgb(75, 192, 192)', // 设置线的颜色
	backgroundColor: ['rgba(179, 0, 33, 0.5)'],// 设置点的填充色
	pointStyle: 'circle',     //设置点类型为圆点
    pointRadius: 6,    //设置圆点半径
    pointHoverRadius: 10, //设置鼠标移动上去后圆点半径
    tension: 0.1
  }]
};
const config = {
  type: 'line', // 设置图表类型
  data: data,
  options: {
	indexAxis: 'y',
    responsive: true,  // 设置图表为响应式

    interaction: {  // 设置每个点的交互
      intersect: false,
    },
    scales: {  // 设置 X 轴与 Y 轴
      x: {
		beginAtZero: true,// 设置 X 轴从 0 开始
        display: true,
        title: {
          display: true,
          text: '日期'
        }
      },
      y: {
        display: true,
        title: {
          display: true,
          text: '票数'
        }
      }
    }
  }
};
const myChart = new Chart(ctx, config);
</script>

</body>
</html>
              