Ionic: легенда Donut Chart занимает полную карту в мобильном телефоне, в то время как на большом экранном графике легенда выглядит отлично - PullRequest
Новая
       16

Ionic: легенда Donut Chart занимает полную карту в мобильном телефоне, в то время как на большом экранном графике легенда выглядит отлично

0 голосов
/ 01 июля 2019

Я использую chartjs в мобильном приложении Ionic 4 с Angular7.

Ниже приведена конфигурация диаграммы в файле 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>

1 Ответ

0 голосов
/ 01 июля 2019

Вы можете поместить легенду внизу, после чего вы можете поиграть со свойством aspectRatio, чтобы получить точное представление, к которому вы стремитесь ...

для переключения между режимами просмотра рабочего стола и мобильного ... мы используем метод onResize ... где мы перемещаем положение легенды справа налево при переходе к меньшему размеру ...

релевантно HTML 

<ion-card>
  <ion-card-header>
    Capacity Distribution
  </ion-card-header>
  <ion-card-content>
    <canvas #lineChart>{{ chart }}</canvas>
  </ion-card-content>
</ion-card>

релевантно 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
          }
        }
      }
    });

завершено здесь работает стек стека

...