Javascript 如何在Ionic2应用程序中显示Chartjs完整页面景观

我正在尝试在我的Ionic 2应用程序中使用一些图表。我最初玩过，但发现使用了它

无论如何，我也想看看，但我不能让这个显示，当设备旋转到横向时，它只占用页面。虽然这确实使手机上的图表变小了，但平板电脑上有很大的空间

在纵向模式下，图表自身的大小非常完美，但在横向模式下则不一样，如下所示。不管屏幕当前的旋转情况如何，它似乎总是在纵向模式下拾取屏幕的宽度

标记如下所示

 <ion-content style='height: 100%; overflow: hidden' scroll='false' padding (window:resize)="onResize($event)">
        <ion-list>
            <ion-item>
               <ion-label >Select label</ion-label>
               <ion-select >
                  <ion-option> Options 1</ion-option>
               </ion-select>
            </ion-item>
          </ion-list>
            <canvas #pieChartCanvas>
          </canvas>   
    </ion-content>

我曾尝试在resize事件中调整画布的大小，但这也会收缩标签。我只想要图表，所以宽度和高度是显示高度/宽度的最小值（现在滚动）

我已经看到很多人提到他们使用这个图表与离子，所以如果有人知道一个方法围绕这一点，这将是伟大的

---

非常感谢您的帮助

您使用过图表的选项吗？@aishap2我有所有的默认值，只有两个看起来会有所不同的选项是

MaintaintAspectratio

和

responsive

。我添加它们只是为了确保它们默认为

true

，它们看起来是这样的。还有其他选择吗？你还有什么建议吗（也许我错过了什么）？也许我需要对它的容器做些什么？我已经将only responsive设置为true，它工作得很好。

ionViewDidLoad() {
    this.pieChart = new Chart(this.pieChartCanvas.nativeElement, {
        type: 'doughnut',
        data: {
            labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
            datasets: [{
                label: '# of Votes',
                data: [12, 19, 3, 5, 2, 3],
                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)',
                    'rgba(75, 192, 192, 0.2)',
                    'rgba(153, 102, 255, 0.2)',
                    'rgba(255, 159, 64, 0.2)'
                ],
                hoverBackgroundColor: [
                    "#FF6384",
                    "#36A2EB",
                    "#FFCE56",
                    "#FF6384",
                    "#36A2EB",
                    "#FFCE56"
                ]
            }]
            ...