javascript - 可滚动的 highchart 在 JS 中工作，但在运行 Angular HighCharts 时遇到问题？

Question

我正在查看这个代码库 https://jsfiddle.net/mushigh/zvq46kg8/这让我了解了如何开发滚动条。当尝试自己做时，虽然它不能正常工作。

fiddle 显示了图表的以下设置:

var chart = Highcharts.chart('container', {
  chart: {
    type: 'bar',
  },
  plotOptions: {
    column: {
      stacking: 'normal'
    },
  },
  xAxis: {
    type: 'category',
    min: 0,
    max: 5
  },
  scrollbar: {
    enabled: true
  },
  series: [{
      type: 'pie',
      name: 'Total consumption',
      zIndex: 9,
      data: [{
        name: 'Jane',
        y: 13,
        color: Highcharts.getOptions().colors[0] // Jane's color
      }, {
        name: 'John',
        y: 23,
        color: Highcharts.getOptions().colors[1] // John's color
      }, {
        name: 'Joe',
        y: 19,
        color: Highcharts.getOptions().colors[2] // Joe's color
      }],
      center: [300, 10],
      size: 50,
      showInLegend: false,
      dataLabels: {
        enabled: false
      }
    }, {
      name: "A",
      data: test(20)
    }, {
      name: "B",
      data: test(20)
    },
    {
      name: "C",
      data: test(20)
    },
    {
      name: "D",
      data: test(20)
    }
  ]
});

我试图用 angle-highcharts 来实现这一点，虽然看起来一切正常，但水平条在视口(viewport)之外时不会隐藏。

看起来像这样:

您可以看到有些栏在不应显示时显示。 (这是与上面的 jsfiddle 相比)。

我创建了一个存储库以实现可重复性。你应该只需要 npm intall 然后 ngserve 。该存储库位于:https://github.com/fallenreaper/highchart-angular-scrolling.git

一切都应该就位，您应该能够为应用程序提供服务，转到本地主机并查看问题。我还没有更新它，但我也可以将数据集恢复为 jsfiddle 中给出的数据集。

这是 Angular HighCharts 的一个故障，还是有其他问题？

Answer 1

这是我在 Angular 环境中分享的演示的复制品。

演示:https://codesandbox.io/s/angular-ldxch

请注意，此示例使用 Highstock，而不是 Highcharts - Highcharts 中未实现滚动条。

Highcharts 使用scrollablePlotArea 代替:https://api.highcharts.com/highcharts/chart.scrollablePlotArea