Ionic：Donut Chart 的图例在移动设备上占据了完整的卡片，而在大屏幕上图表和图例看起来不错

Question

我在带有 Angular7 的 Ionic 4 移动应用程序中使用 chartjs。

在移动屏幕中，圆环图仅呈现图例。
供参考，手机上的图片UI： Mobile UI screenshot of chart1
在中型和大型屏幕中，图表可以根据配置很好地呈现图表和图例。
中号和大号图片供参考UI： Medium and Large UI Screenshot of chart2

下面是 ts 文件中的图表配置：

this.doughnutChart = new Chart(this.doughnutCanvas.nativeElement, {
  type: 'doughnut',
  data: {
    labels: ['Rage 30 TB', 'Free 15 TB', 'Dead 12 TB', 'Slce 10 TB', 'Phtion 10 TB', 'Chehead 8 TB',
    'Logion 8 TB', 'Usaity 4 TB', 'Dirhead 3 TB'],
    datasets: [{
      // label: '# of Votes',
      data: [30, 15, 12, 10, 10, 8, 8, 4, 3],
      backgroundColor: [
        'rgba(255, 159, 64, 0.8)',
        'rgba(255, 99, 132, 0.8)',
        'rgba(54, 162, 235, 0.8)',
        'rgba(255, 206, 86, 0.8)',
        'rgba(75, 192, 192, 0.8)',
        'rgba(229, 0, 255, 0.8)',
        'rgba(0, 255, 127, 0.8)',
        'rgba(255, 233, 0, 0.8)',
        'rgba(0, 182, 255, 0.8)',

      ],
      // hoverBackgroundColor: [
      //   '#FFCE56',
      //   '#FF6384',
      //   '#36A2EB',
      //   '#FFCE56',
      //   '#FF6384'
      // ]
    }]
  },
  options:{
    responsive: true,
    legend: {
      display: true,
      position: "right",
      labels: {
        // fontFamily: "Comic Sans MS",
        // boxWidth: 2,
        // boxHeight: 2
      }
    }
  }
});

Html代码：

<ion-card>
  <ion-card-header>
    Capacity Distribution
  </ion-card-header>
  <ion-card-content>
    <canvas #doughnutCanvas ></canvas>
  </ion-card-content>
</ion-card>

Answer 1

您可以将图例放在底部，之后您可以使用 aspectRatio 属性来获得您想要的确切视图...

在桌面和移动视图之间切换...我们使用 onResize 方法...当我们移动到较小的尺寸时，我们将图例的位置从右移到底部...

相关TS

this.chart = new Chart(this.chartRef.nativeElement, {
      type: 'doughnut',
      data: {
        labels: ['Rage 30 TB', 'Free 15 TB', 'Dead 12 TB', 'Slce 10 TB', 'Phtion 10 TB', 'Chehead 8 TB',
          'Logion 8 TB', 'Usaity 4 TB', 'Dirhead 3 TB'],
        datasets: [{
          // label: '# of Votes',
          data: [30, 15, 12, 10, 10, 8, 8, 4, 3],
          backgroundColor: [
            'rgba(255, 159, 64, 0.8)',
            'rgba(255, 99, 132, 0.8)',
            'rgba(54, 162, 235, 0.8)',
            'rgba(255, 206, 86, 0.8)',
            'rgba(75, 192, 192, 0.8)',
            'rgba(229, 0, 255, 0.8)',
            'rgba(0, 255, 127, 0.8)',
            'rgba(255, 233, 0, 0.8)',
            'rgba(0, 182, 255, 0.8)',

          ],
          // hoverBackgroundColor: [
          //   '#FFCE56',
          //   '#FF6384',
          //   '#36A2EB',
          //   '#FFCE56',
          //   '#FF6384'
          // ]
        }]
      },
      options: {
        responsive: true,
        aspectRatio: 1,
        maintainaApectRatio: true,
        onResize: function () {
          if (window.innerWidth > 700) {
            this.legend.position = 'right';
            this.legend.aspectRatio = 1.4;
            this.legend.maintainaApectRatio = false;
          } else {
            this.legend.position = 'bottom';
            this.legend.aspectRatio = 1;
            this.legend.maintainaApectRatio = true;
          }
        },
        legend: {
          display: true,
          position: "bottom",
          labels: {
            // fontFamily: "Comic Sans MS",
            // boxWidth: 2,
            // boxHeight: 2
          }
        }
      }
    });

完成working stackblitz here

Ionic：Donut Chart 的图例在移动设备上占据了完整的卡片，而在大屏幕上图表和图例看起来不错

Ionic: Doughnut Chart's legend occupies complete card in mobile, while on big screen chart and legend looks fine

javascript

typescript

chart.js

angular

ionic4