HTML5网页如何制作图表统计 HTML5网页数据可视化的实现

<canvas id="myChart" width="400" height="200"></canvas>
<script>
  const ctx = document.getElementById('myChart').getContext('2d');
  const data = [30, 50, 80, 60];
  const barWidth = 50;
  const barGap = 20;
  let x = 30;
<p>data.forEach(value => {
ctx.fillStyle = '#3498db';
ctx.fillRect(x, 200 - value, barWidth, value);
x += barWidth + barGap;
});
</script></p>

<canvas id="lineChart"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
  const ctx = document.getElementById('lineChart').getContext('2d');
  new Chart(ctx, {
    type: 'line',
    data: {
      labels: ['一月', '二月', '三月', '四月'],
      datasets: [{
        label: '销售额',
        data: [12, 19, 15, 22],
        borderColor: '#e74c3c',
        tension: 0.1
      }]
    }
  });
</script>

const myChart = new Chart(ctx, { ... });
<p>myChart.options.onClick = (event, elements) => {
if (elements.length > 0) {
const index = elements[0].index;
alert(<code>你点击了第 ${index + 1} 个数据点</code>);
}
};</p>

canvas {
  max-width: 100%;
  height: auto !important;
}