在线运行测试这段代码:

<!DOCTYPE html>
<html>
<head>
  <title>Highcharts Scrollable Plot Area Example</title>
  <script src="https://code.highcharts.com/highcharts.js"></script>
  <style>
    #container {
      width: 600px;
      height: 400px;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <div id="container"></div>
  <script>
    // 1. 生成示例数据（100个数据点）
    const categories = [];
    const data = [];
    for (let i = 1; i <= 100; i++) {
      categories.push(`Point ${i}`);
      data.push(Math.sin(i / 10) * 10);
    }

    // 2. Highcharts配置
    Highcharts.chart('container', {
      chart: {
        type: 'line',
        scrollablePlotArea: {
          minWidth: 1000,  // 必须大于容器宽度才能触发滚动
          scrollPositionX: 1  // 1表示滚动到最右侧
        }
      },
      title: { text: 'X轴滚动到最右侧的示例' },
      xAxis: {
        categories: categories,
        min: 90,  // 初始显示最后10个数据点（100-90=10）
        max: 100
      },
      yAxis: { title: { text: 'Value' } },
      series: [{
        name: 'Sample Data',
        data: data,
        color: '#4285F4'
      }],
      credits: { enabled: false }
    });
  </script>
</body>
</html>

运行后的最终图表📊效果:

你会发现它已经自动滚动到了 x 轴的最右侧.

在线编辑器地址:

https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/chart/scrollable-plotarea

Uh oh!

iOS如何设置X轴滚动到最右边 #1592

Description

Activity

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions