// 正确的数据格式示例
this.chartData = {
  labels: ['January', 'February', 'March'],
  datasets: [
    {
      label: 'Sales',
      data: [65, 59, 80],
      backgroundColor: 'rgba(75, 192, 192, 0.2)',
      borderColor: 'rgba(75, 192, 192, 1)',
      borderWidth: 1
    }
  ]
};

if (this.chartData && this.chartData.labels && this.chartData.datasets) {
  this.renderChart();
} else {
  console.error('图表数据不完整');
}

ionViewDidLoad() {
  this.dataService.getChartData().subscribe(data => {
    this.chartData = data;
    this.renderChart();
  });
}

this.chartData.datasets[0].data = this.chartData.datasets[0].data.map(Number);

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import Chart from 'chart.js';

@Component({
  selector: 'page-chart',
  templateUrl: 'chart.html'
})
export class ChartPage {
  chart: any;

  constructor(public navCtrl: NavController) {}

  ionViewDidLoad() {
    this.setupChart();
  }

  setupChart() {
    const ctx = document.getElementById('myChart');
    
    // 确保数据完整
    const chartData = {
      labels: ['Red', 'Blue', 'Yellow'],
      datasets: [{
        data: [300, 50, 100],
        backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56'],
        hoverBackgroundColor: ['#FF6384', '#36A2EB', '#FFCE56']
      }]
    };

    // 检查所有参数是否有效
    if (ctx && chartData && chartData.labels && chartData.datasets) {
      this.chart = new Chart(ctx, {
        type: 'doughnut',
        data: chartData,
        options: {
          responsive: true,
          maintainAspectRatio: false
        }
      });
    } else {
      console.error('图表参数不完整');
    }
  }
}

<ion-content padding>
  <div style="position: relative; height:40vh; width:80vw">
    <canvas id="myChart"></canvas>
  </div>
</ion-content>