11

使用 ngx-charts,特别是垂直条形图,我发现有一个元素限制,在这些元素上不会显示条形图。

我认为限制与图表的可用宽度和元素数量有关,这当然是有道理的。

我复制了修改官方示例的“问题”(源数据在 data.ts 中):

  • n = 限制元素:plunkr(存在条形)酒吧
  • n+1 个元素:plunkr(条形消失)在此处输入图像描述

我的问题是:有没有办法防止这种情况发生,比如在需要时添加滚动条,或者更好?

如果没有,是否有一个事件/日志/挂钩我可以用来至少检测它正在发生并隐藏图表/通知用户?

有趣的是,当条形消失时,它们的 g > 路径节点也会从 DOM 中消失。

由于“plunkr 必须伴随代码”的限制,我还在这里粘贴了它的角度模板代码,也许它有帮助:

<ngx-charts-bar-vertical
  [view]="view"
  [scheme]="colorScheme"
  [results]="single"
  [gradient]="gradient"
  [xAxis]="showXAxis"
  [yAxis]="showYAxis"
  [legend]="showLegend"
  [showXAxisLabel]="showXAxisLabel"
  [showYAxisLabel]="showYAxisLabel"
  [xAxisLabel]="xAxisLabel"
  [yAxisLabel]="yAxisLabel"
  (select)="onSelect($event)">
</ngx-charts-bar-vertical>
4

2 回答 2

4

您可以使用barPadding输入设置条之间的填充(以像素为单位)示例:

[barPadding]="2"

于 2018-10-30T16:07:44.860 回答
1

您可以通过更改barPadding (default: 8)groupPadding (default: 16)的值来实现此目的。

参考: https ://swimlane.gitbook.io/ngx-charts/examples/bar-charts/vertical-bar-chart

于 2020-05-01T11:24:08.540 回答