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

我想在chart.js和shows中创建条形图，这是按类别划分的最长电影。 所以我有一张地图，上面按类别列出了最长电影的标题和长度。 例子： 0:{“Intouchables”=>“107”}（来自喜剧） 1:{“魔鬼代言人”=>“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>

创建

我得到了这个条形图：

那么为什么这两个专栏都是关于喜剧的呢？ 我怎样才能在《惊悚片》上演《蓝色崛起》？

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

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

---

你能用来自api的虚拟数据创建stackblitz吗？