为什么 Angular ChartJS 中的一个标签上有更多列？答案

【问题标题】：Why are more columns on one labels in Angular ChartJS?为什么 Angular ChartJS 中的一个标签上有更多列？
【发布时间】：2020-04-22 18:55:41
【问题描述】：

我想在 Chart.js 中创建条形图并按类别显示最长的电影。所以我有一张地图，其中包含按类别划分的最长电影的标题和长度。例子： 0: {"Intouchables" => "107"}（来自喜剧） 1: {"The Devil's Advocate" => "144"}（来自惊悚片）我将这两个数据分别放在一个数组中：

this.keys = Array.from(this.map.keys());
this.values = Array.from(this.map.values());

在条形图中，我希望标题作为标签，长度作为数据，类别作为标签。

我试过了：

createDiagram(){

    this. barChartOptions = {
      scaleShowVerticalLines: false,
      responsive: true
    };

    this.barChartLabels = ['Comedy', 'Thriller'];
    this. barChartType = 'bar';
    this. barChartLegend = true;

    this.barChartData = [
      {data: [this.values[0]], label: this.keys[0]},
      {data: [this.values[1]], label: this.keys[1]}
    ];
  }

html代码：

<button (click)="createDiagram()">Create</button>
<div>
  <div style="display: block">
      <canvas baseChart
              [datasets]="barChartData"
              [labels]="barChartLabels"
              [options]="barChartOptions"
              [legend]="barChartLegend"
              [chartType]="barChartType"></canvas>
  </div>
</div>

我得到了这个条形图：

那么，为什么两栏都在喜剧中？惊悚片里的蓝怎么办？

【问题讨论】：

你能用来自 api 的虚拟数据创建 stackblitz 吗？
stackblitz.com/edit/…

标签： javascript angular firebase charts chart.js

【解决方案1】：

https://stackblitz.com/edit/angular-zbiufy

您有两个类别。因此，对于每个输入，您都需要添加两个值。然后对于两种颜色，你可以让第一个项目的第二个值 0 和第二个项目的第一个值 0 然后你可以得到你想要的。

 this.barChartData = [
          {data: [this.values[0],0], label: this.keys[0]},
          {data: [0,this.values[1]], label: this.keys[1]}
        ];

【讨论】：