Как настроить высоту Chart.js в соответствии с размером наборов данных.Ионная 3 - PullRequest
Новая
       12

Как настроить высоту Chart.js в соответствии с размером наборов данных.Ионная 3

0 голосов
/ 16 мая 2018

Я создаю приложение на Ionic, которое получает данные из API и показывает их на горизонтальной диаграмме. Но количество данных не является значением по умолчанию, тогда иногда высоты диаграммы недостаточно

See here

и

here

и у меня есть проблемы с автоматической настройкой горизонтальной диаграммы по высоте. Я уже пытался установить height: auto, но chart.js устанавливает высоту по умолчанию.

Мой HTML: 

<div class="chart-container" >
    <canvas #barCanvas></canvas>
</div>

Мой CSS: 

.chart-container{
    position: relative;
    margin: auto;
    height: 110vh;
    width: 80vw;
}

My JS 

private loadChart(){

var backgroundColor = [];

if (this.barChart) {
    this.barChart.destroy();
}
for (let x = 0; x < this.servicos.length; x ++) {
    backgroundColor[x] = this.randomColor();        
}


this.barChart = new Chart(this.barCanvas.nativeElement, {
    type: 'horizontalBar',
    data: {
        labels: this.temp.labels,
        datasets: [{                
            label:this.consulta.Unidade,
            data: this.temp.valores,
            backgroundColor: backgroundColor,
            borderWidth: 0                
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        scales: {
            xAxes:[{
                ticks: {
                    beginAtZero: true
                }
            }],
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }

});

}

[ОБНОВЛЕНИЕ 1] Я пытался изменить значения height, сравнивая размер таблицы перед ее созданием. Это сработало, но у меня есть фильтр, который выполняет новый запрос и строит новую диаграмму, но для свойства height установлены значения по умолчанию для chartjs. 

if(this.servicos.length <= 10){
    document.getElementById("chart-container").style.height = "300px"
}
if(this.servicos.length > 10 ){
    document.getElementById("chart-container").style.height = "900px"
}

1 Ответ

0 голосов
/ 17 мая 2018

Проблема была на фильтре.Я использовал модал, который отправлял значения в другое новое представление this.navCtrl.push(IndicadoresPage, {consulta: consulta});.Я изменил на this.viewCtrl.dismiss(consulta) и перехватил данные с помощью onDidDismiss().

Затем я сравнил размер возвращаемых данных и установил chart.canvas.parentNode.style.height = 'XXXpx'; в соответствии с размером данных.

...