ngx 图表角度 x 轴仅显示时间 4 个选项

Question

我是 ngx-charts 的新手。 我正在尝试显示 ngx-chart-line 我试图在我的 xAxis - time (format - hh:mm) 中显示。 但我只想在我的 xAxis 上显示 4 个选项，例如：10:00 12:00 16:00 19:00 我已经尝试用循环和 xAxisTickFormatting 修复它。 在我的 yAxis - 这里的值是我的代码组件 ts

 this.chartData = [
      {
        name: "exAngular",
        series: [
          { value: "252.30", name: "19:20:00" },
          { value: "252.40", name: "19:20:00" },
          { value: "252.40", name: "16:20:00" },
          { value: "252.60", name: "15:20:00" },
          { value: "252.70", name: "13:19:00" },
          { value: "252.70", name: "13:19:00" },
          { value: "252.60", name: "12:19:00" },
          { value: "252.50", name: "12:19:00" },
          { value: "252.50", name: "12:19:00" },
          { value: "252.10", name: "12:17:00" },
          { value: "252.60", name: "11:16:00" },
          { value: "230.40", name: "11:16:00" },
          { value: "230.00", name: "11:16:00" },
          { value: "230.20", name: "11:16:00" },
          { value: "252.60", name: "11:14:00" },
          { value: "252.30", name: "11:14:00" },
          { value: "252.30", name: "11:14:00" },
          { value: "252.30", name: "11:14:00" },
          { value: "252.80", name: "11:14:00" },
          { value: "252.80", name: "09:58:00" },
          { value: "252.70", name: "09:58:00" },
          { value: "252.70", name: "09:58:00" },
          { value: "252.70", name: "09:58:00" },
          { value: "251.70", name: "09:55:00" },
          { value: "251.70", name: "09:55:00" },
          { value: "251.80", name: "09:55:00" },
          { value: "251.80", name: "09:55:00" },
          { value: "251.80", name: "09:53:00" },
          { value: "251.80", name: "09:52:00" },
          { value: "252.00", name: "09:52:00" },
          { value: "251.80", name: "09:52:00" },
          { value: "252.00", name: "09:51:00" },
          { value: "252.00", name: "09:49:00" },
          { value: "252.00", name: "09:49:00" },
          { value: "252.00", name: "09:49:00" },
          { value: "252.10", name: "09:49:00" },
          { value: "251.10", name: "09:47:00" },
          { value: "251.10", name: "09:47:00" },
          { value: "251.50", name: "09:46:00" }
        ]
      }
    ];`

这是我的组件 html：

<div>
  <ngx-charts-line-chart [results]="chartData"
                         [scheme]="{domain: ['#000']}"
                         [xAxis]="true"
                         [yAxis]="true"
  </ngx-charts-line-chart>
</div>

Answer 1

您只需要过滤数据并将其分配给图表

this.chartData[0].series = this.chartData[0].series.filter(x=> x.name.split(':')[0]==10 ||x.name.split(':')[0]==12||x.name.split(':')[0]==16||x.name.split(':')[0]==19  )

单击此处进行演示