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

Question

我是ngx-charts的新手。我尝试在我的xAxis - time (格式- hh:mm)中显示ngx-chart。但我只想在我的xAxis上显示4个选项，例如: 10:00 12:00 16:00 19:00我已经尝试过使用loop和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  )

Click here for demo