Почему больше столбцов на одной метке в Angular Chart JS? - PullRequest
Новая
       14

Почему больше столбцов на одной метке в Angular Chart JS?

0 голосов
/ 22 апреля 2020

Я хотел бы создать гистограмму на графике. js и показывает, какой самый длинный мов ie по категориям. Итак, у меня есть карта, которая содержит название и длину самого длинного mov ie по категориям. пример: 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>

и я получаю эту гистограмму: enter image description here

Так почему же обе колонки в комедии? Как я могу сделать синий подход на триллер?

1 Ответ

1 голос
/ 23 апреля 2020

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

У вас есть две категории. Поэтому для каждого входа нужно добавить два значения. Тогда для двух цветов U может сделать второе значение первого элемента 0 и первое значение второго элемента 0, тогда вы можете получить то, что хотите. 

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