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';

如何给x轴字符串标签？

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