<!-- 引入 Highcharts 库 -->
<script src="https://code.highcharts.com/highcharts.js"></script>

<!-- 创建图表容器 -->
<div id="chart-container" style="width: 100%; height: 400px;"></div>

<!-- 在 body 标签的底部添加以下 JavaScript 代码 -->
<script>
  // 初始化数据
  var initialData = [5, 3, 7, 2, 4];
  var chart;

  // 配置 Highcharts 初始柱形图
  Highcharts.chart('chart-container', {
    chart: {
      type: 'column' // 图表类型为柱形图
    },
    title: {
      text: 'Highcharts 动态图' // 图表标题
    },
    xAxis: {
      categories: ['Category 1', 'Category 2', 'Category 3', 'Category 4', 'Category 5'], // x 轴刻度标签
      title: {
        text: 'Categories' // x 轴标题
      }
    },
    yAxis: {
      title: {
        text: 'Values' // y 轴标题
      }
    },
    series: [{
      name: 'Series 1',
      data: initialData // 初始数据系列
    }]
  });

  // 定时器，模拟动态更新数据
  setInterval(function () {
    // 生成新的随机数据
    var newData = initialData.map(function () {
      return Math.floor(Math.random() * 10) + 1;
    });

    // 获取图表对象
    chart = Highcharts.charts[0];

    // 更新数据
    chart.series[0].setData(newData);

  }, 2000); // 每两秒更新一次数据
</script>