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

Question

我想在Chart.js中创建条形图，并按类别显示最长的电影，所以我有一个包含标题和长度的最长的电影类别的地图.example:0: {"Intouchables" => "107"}。(来自喜剧)1：{"魔鬼代言人"=> "144"}。(from thriller)我把这两个数据分别放在一个数组中。

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.comeditangular-zbiufy

你有两个类别。所以每一个输入都需要添加两个值。那么对于两个颜色，U可以让第一个项目的第二个值为0，第二个项目的第一个值为0，那么你就可以得到你想要的东西。

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