web-dev-qa-db-ja.com

ng2-chartsでチャートの高さを設定するにはどうすればよいですか

ng2-charts を使用してチャートの高さを設定するにはどうすればよいですか？ ng2-chartsサイトのデモと同じように、折れ線グラフを作成しています。

ドキュメントでng2-chartsと chart.js を検索しました。 chart.jsでは、<canvas height="400">のようにキャンバス要素に高さプロパティを設定しているように見えますが、その要素はng2-chartsコンポーネントによって隠されています。

angularng2-charts
9
BrandonReid

Tsファイルで、chartOptionsを::として宣言します。

chartOptions = {
responsive: true,
maintainAspectRatio: false,

}

同様に、htmlファイルのプロパティbind [options] = "chartOptions"で、divタグに必要な高さ、幅を設定します

 <div style="display: block; width: 500px; height: 400px;">
  <canvas
      baseChart
      [chartType]="'line'"
      [datasets]="chartData"
      [labels]="chartLabels"
      [colors]="lineChartColors"
      [options]="chartOptions"
      [legend]="true"
      (chartClick)="onChartClick($event)">
  </canvas>
</div>

これで動作します。

0
Saumyajit

設定

<canvas style="width: inherit;height: inherit;"

チャートの親コンテナサイズに従って適応します

0
e03050