Question

我正在Ionic 4 Mobile App和Angular7中使用chartjs。

在移动屏幕上，甜甜圈图仅呈现图例。
作为参考，移动UI上的图片： Mobile UI screenshot of chart 1
在大屏幕和大屏幕中，图表可以根据配置很好地显示图表和图例。
作为参考，在中型和大型UI上的图片： Medium and Large UI Screenshot of chart 2

以下是 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的图例在手机中占据完整的卡，而在大屏幕上，图例和图例看起来很好

1 个答案: