时间戳

首页 > 解决方案 > 可滚动的 highchart 在 JS 中工作，但在通过 Angular HighCharts 运行时出现问题？

javascript - 可滚动的 highchart 在 JS 中工作，但在通过 Angular HighCharts 运行时出现问题？

问题描述

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

小提琴显示了图表的以下设置：

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)
    }
  ]
});

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

它看起来像这样：在此处输入图像描述

你可以看到有一些条形图在它们不应该显示的时候显示。（这与上面的 jsfiddle 相比）。

我创建了一个 repo 以创建可重复性。你应该只需要 npm intall 然后 ng serve 。回购位于：https ://github.com/fallenreaper/highchart-angular-scrolling.git

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

这是 Angular HighCharts 的一个小故障，还是发生了其他事情？

标签： javascriptangulartypescripthighcharts

解决方案

这是您在 Angular 环境中共享的演示的复制品。

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

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

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

推荐阅读