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

Question

我想在 Chart.js 中创建条形图，并按类别显示最长的电影。 所以我有一张 map ，其中包含按类别列出的最长电影的标题和长度。 例子: 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>

我得到这个条形图:

那么为什么这两篇专栏都是喜剧呢？ 我怎样才能在惊悚片中出现蓝色？

Answer 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]}
        ];