диаграмма рассеяния ng2 как разместить метки по оси x

Question

Используя эту точечную диаграмму https://valor -software.com / ng2-charts / # ScatterChart

есть возможность назначать метки.но это не рисунок на холсте

html

<div>
  <div>
    <div style="display: block">
      <canvas baseChart
        [datasets]="scatterChartData"
        [options]="scatterChartOptions"
        [labels]="scatterChartLabels"
        [chartType]="scatterChartType">
      </canvas>
    </div>
  </div>
</div>

Машинопись

import { ChartDataSets, ChartType, ChartOptions } from 'chart.js';
import { Label } from 'ng2-charts';


 public scatterChartOptions: ChartOptions = {
    responsive: true,
  };
  public scatterChartLabels: Label[] = ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'];

  public scatterChartData: ChartDataSets[] = [
    {
      data: [
        { x: 1, y: 1 },
        { x: 2, y: 3 },
        { x: 3, y: -2 },
        { x: 4, y: 4 },
        { x: 5, y: -3 },
      ],
      label: 'Series A',
      pointRadius: 10,
    },
  ];
  public scatterChartType: ChartType = 'scatter';

Как сделать, чтобы метки оси х были указаны?

Answer 1

Вы можете использовать пользовательский форматировщик меток для отображения пользовательских значений вместо цифр.

values = [
  "3:00 am",
  "7:00 am",
  "11:00 am",
  "3:00 pm",
  "7:00 pm",
  "11:00 pm",
]

public ScattterChartOptions: ChartOptions = {
  responsive: true,
  scales: {
    xAxes: [{ticks: {
        callback: value => this.values[value]
      } }],
  }
};

Аналогичный пример: https://stackblitz.com/edit/ng2-charts-bubble-template-g4tbyk