Chart js 如何自定义 y 轴标签并从数据范围内随机选择 x 轴的值

Question

我一直在使用 charts.js 绘制图表，显示每天的锻炼持续时间。 y 轴应该有日期，x 轴应该有系列的持续时间，这是我的数据集：

    public lineChartData: ChartDataSets[] = [
    { data: [65, 19, 40, 81, 56, 5, 40], label: 'Series A' },
    { data: [95, 69, 40, 81, 56, 96, 40], label: 'Series B' },
    { data: [65, 74, 40, 41, 54, 55, 40], label: 'Series C' }
  ];
  public lineChartLabels: Label[] = ['2020/05/20', '2020/05/21', '2020/05/22', '2020/05/23', '2020/05/24', '2020/05/25'];

到目前为止我找不到任何与实现相关的东西，如果有人能帮助我解决这个问题，那将非常有帮助。我已经尝试过带有水平条形图的 stackblitz，我们需要像 LINE CHART 中的一样这是 stackblitz link

Answer 1

您需要使用一个scatter chart and define the option showLine: true on each dataset. Further you have to define the y-axis as a time cartesian axis如下。

yAxes: [
  {
    type: "time",
    time: {
      parser: "YYYY/MM/DD",
      unit: "day",
      displayFormats: {
        day: "YYYY/MM/DD"
      }
    },
    ticks: {
      reverse: true
    }       
  }
]

由于散点图需要point format中的数据，您必须在ngOnInit方法中生成适当的数据结构，如下所示：

ngOnInit() {
  this.lineChartData.forEach(ds => {
    ds.data = ds.data.map((v, i) => ({ x: v, y:  this.lineChartLabels[i] }));
  });
}

同时从 canvas 中删除 [labels]="lineChartLabels"，以点格式定义数据时不需要这样做。

Unfortunately however ng2-charts can't cope with this configuration and displays wrong colors for the data points and the legend labels. Therefore I also had to remove [colors]="lineChartColors" from the canvas and define the colors on the datasets. You'll probably have to get rid of this wrapper library and use Chart.js directly in order to obtain the expected result.

请查看您在此 StackBlitz 中修改后的代码。

Chart js 如何自定义 y 轴标签并从数据范围内随机选择 x 轴的值

How do I customize y-axis labels and randomly pick the value from the data range for x-axis in Chart js

javascript

chart.js

chart.js2

angular