如何使用 NGX 图表实现时间线过滤条形图？

Question

我一直在尝试弄清楚如何实现 NGX 图表的 x 轴时间线，就像在文档演示页面中一样： https://swimlane.github.io/ngx-charts/#/ngx-charts/timeline-filter-bar-chart-demo

但是没有任何地方代码是如何实现的，就像在其他 ngx 图表中一样。

我掌握了 JSON 和基础知识：

name: 'Temperature',
      series: [
        { value: 22, name: '2021-06-01 10:45:00+00' },
        { value: 33, name: '2021-06-01 11:14:44+00' },
        { value: 11, name: '2021-06-01 13:45:00+00' }, ... ]

但如果没有 stackblitz 代码示例，就像其他图表类型和功能一样，我似乎什么也做不了。

Answer 1

据我所知，我认为数据必须采用 JSON 格式

data = [
    {
      name: 'Temperature',
      series: [{
          value: 22,
          name: '2021-06-01 10:45:00+00'
        },
        {
          value: 33,
          name: '2021-06-01 11:14:44+00'
        },
        {
          value: 11,
          name: '2021-06-01 13:45:00+00'
        }
      }]

 <div *ngFor="let arr of data ">
   <ngx-charts-bar-vertical
    [view]="view"
    [scheme]="colorScheme"
    [results]="arr.series"
    [gradient]="gradient"
    [xAxis]="showXAxis"
    [yAxis]="showYAxis"
    [legend]="showLegend"
    [showXAxisLabel]="showXAxisLabel"
    [showYAxisLabel]="showYAxisLabel"
    [xAxisLabel]="xAxisLabel"
    [yAxisLabel]="yAxisLabel"
    (select)="onSelect($event)">
  </ngx-charts-bar-vertical> 
  </div>

Answer 2

自定义演示图表

“timeline-filter-bar-chart”是自定义图表组件的示例，您可以在库的帮助下自行创建。

您可以在 framewok's repo.

中找到源代码

如何使用 NGX 图表实现时间线过滤条形图？

How can I achieve timeline filter bar chart with NGX charts?

angular

angular11

ngx-charts