ng2散点图如何在x轴上放置标签答案

【问题标题】：ng2 scatter chart how to put labels in x axisng2散点图如何在x轴上放置标签
【发布时间】：2019-06-12 13:47:27
【问题描述】：

使用此散点图 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轴字符串标签？

【问题讨论】：

您能否提供代码的相关部分，或者提供一个堆栈闪电战来重现该问题？

标签： angular chart.js ng2-charts

【解决方案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

【讨论】：