Display Highcharts zoomable line chart

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container"/>

CSS

#container {
	width: 760px;
	height: 510px;
}

JavaScript

// 生成随机数据
const data = [];
const categories = [];
for (let i = 1; i <= 100; i++) {
  data.push([i, Math.floor(Math.random() * (300 - 20 + 1)) + 20]);
  categories.push(i)
}

// 配置 Highcharts
const chart = Highcharts.chart("container", {
  chart: {
    zoomType: "x",
    /* backgroundColor: '#000', */
  },
  title: {
    text: "Zoomable Line Chart",
  },
  xAxis: {
    crosshair: {
      color: 'rgba(0,0,0,0.65)',
      width: 1,
      zIndex: 10000,
    },
    gridLineWidth: 0,
    lineWidth: 1,
    tickWidth: 1,
    tickLength: 4.5,
    tickPosition: 'outside',
    tickColor: '#000000',
    tickInterval: 10,
    min: 1.5,
    max: 99.5,
    labels: {
      autoRotation: false,

      style: {
        color: '#000000',
        fontSize: '10px',
      },
    },
    events: {
      setExtremes: function(e) {
        if (typeof e.min !== 'undefined' && typeof e.max !== 'undefined') {
          const chart = this.chart;
            points = chart.series[0].points,
            minPoint = points.find(point => point.x >= e.min),
            reversedPoints = points.reverse()
          maxPoint = reversedPoints.find(point => point.x <= e.max);

          if (points.length > 1 && (e.min !== minPoint.x || e.max !== maxPoint.x)) {
            setTimeout(() => chart.xAxis[0].setExtremes(minPoint.x, maxPoint.x), 0)
          }

        }
      }
    }
  },
  yAxis: {
    title: {
      text: "Y Axis",
    },
    gridLineColor: 'rgba(255,255,255,0.65)',
    gridLineWidth: 0,
    lineWidth: 1,
    tickWidth: 1,
    tickLength: 4,
    tickPosition: 'outside',
    tickColor: '#000000',
  },
  series: [{
    name: "Random Data",
    data: data,
  }, ],
});