ngx-charts-bar-vertical:当元素太多而没有绘制条形图时该怎么办

时间:2017-10-05 14:12:51

标签: angular ngx-charts

使用ngx-charts,特别是垂直条形图,我发现元素的限制不会显示条形。

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

我复制了修改官方示例的'问题'(源数据在data.ts内部):

  • n =限制元素:plunkr(存在条形)bars
  • n + 1个元素:plunkr(不见了)enter image description here

我的问题是:有没有办法阻止这种情况,例如在需要时添加滚动条,还是更好?

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

值得注意的是,当条形消失时,它们的g> 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>

2 个答案:

答案 0 :(得分:1)

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

  

[barPadding] =“ 2”

答案 1 :(得分:0)

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

>

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