Как настроить адаптивную chart.js диаграмма, чтобы не заполнять экран?

#javascript #html #css #chart.js

#javascript #HTML #css #chart.js

Вопрос:

Я хочу установить высоту моей диаграммы равной проценту от содержащегося в ней div. Как мне это сделать?

Это такой простой вопрос, но если я установлю диаграмму responsive: false , то я могу ее растянуть, но это непропорционально, поскольку базовые высота и ширина уже установлены.

Если я установлю это как responsive: true , то диаграмма выйдет из содержащего div и заполнит экран.

Если я установлю для CSS содержащего div-файла значение contain: content , то я смогу видеть только верхнюю часть графика.

Что мне делать?

например

 <div style="display: block; width: 80%; height: 30%; margin-left:10%;">
    <canvas baseChart [datasets]="barChartData" [labels]="barChartLabels" [colors]="colors" [options]="barChartOptions" [legend]="'false'"
        [chartType]="'bar'" (chartClick)="chartClicked($event)">
    </canvas>
</div>
  

Ответ №1:

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