диаграмма нг-2 не отвечает - PullRequest
Новая
       20

диаграмма нг-2 не отвечает

0 голосов
/ 08 января 2019

Я использую ng2-диаграммы. У меня есть вкладка даты, где я могу выбрать сегодня, неделю, месяц и конкретные даты. В соответствии с этим мои данные меняются в графике. Мои данные работают хорошо в соответствии с датой. Но моя диаграмма не достаточно отзывчива для отображения значений, соответствующих датам.

Сегодняшний просмотр: https://ibb.co/bHDdwLG данные [100,105,120],

Просмотр недели: https://ibb.co/SfWxyMr данные [100, 105, 120, 140]

Если вы видите вид недели, до завершения значения: график 140 сокращается, это не отзывчиво, кажется.

Код

TS 

public lineChartOptions: any = {
responsive: true,
};

getabc(start?: moment.Moment, end?: moment.Moment) {
this.abcService.getabc(this.token, start, end).subscribe(
  data => {
    this.a = data.map(k => k.a);
    this.date_time = data.map(k => k.datetime.toLocaleTimeString());
    this.lineChartData = [
      { data: this.a, label: 'abc' }
  ]
  this.lineChartLabels=this.date_time
    console.log(this.a);
    console.log(this.date_time); // I can get the values correctly 
   according to the date
  }
);
}

HTML 

<div style="display: block;" *ngIf="lineChartData.length > 0">
<canvas baseChart width="400" height="180" style="margin- 
left:5%;margin-top: 5%;" [datasets]="lineChartData"
[labels]="lineChartLabels" [options]="lineChartOptions" 
[colors]="lineChartColors" [legend]="lineChartLegend"
[chartType]="lineChartType" (chartHover)="chartHovered($event)" 
(chartClick)="chartClicked($event)"></canvas>
</div>
</div>

Ответы [ 2 ]

0 голосов
/ 28 мая 2019

Вот решение (класс должен называться chart) 

<div class="chart">
      <canvas baseChart
              [datasets]="barChartData"
              [labels]="barChartLabels"
              [options]="chartOptions"
              legend="true"
              chartType="bar">
      </canvas>
    </div>

CSS 

.chart {
  position: relative;
  min-height: unset;
}
0 голосов
/ 08 января 2019

Не указывайте ширину и высоту для элемента canvas, так как это ограничивает отображение графика полностью, вместо этого вы должны иметь обертку диаграммы и дать ей ширину, а canvas будет иметь размер в соответствии с доступным пространством. 

<div class="chart-wrapper">
<canvas baseChart [datasets]="lineChartData"  *ngIf="lineChartData.length > 0"
[labels]="lineChartLabels" [options]="lineChartOptions" 
[colors]="lineChartColors" [legend]="lineChartLegend"
[chartType]="lineChartType" (chartHover)="chartHovered($event)" 
(chartClick)="chartClicked($event)"></canvas>
</div>

А в стиле css ваш класс обёртки 

.chart-wrapper{
    position: relative;
    height: 40vh;
    max-width:100%;
}
...