ionic3学习之集成ChartJs图表控件

头像
Wayfreem
    阅读 12 分钟
    1

    简介

    按照官方的说法：为设计和开发人员准备的简单、灵活的 JavaScript 图表工具。

    Chart.js 是由社区共同维护的开源项目，提供 8 种可视化展现方式，每种方式都具有动态效果并且可定制。基于 HTML5 Canvas渲染图表，在所有现代浏览器（IE9+）上都有高效的绘图效率。可以根据窗口的尺寸变化重绘所有的图标，展现更加细腻。

    关于 Chart.js 2.0版本说明

    新增混合图标类型：混合并匹配条形图和折线图，以便在数据集之间提供清晰的视觉区分。
    新增表轴类型：轻松绘制复杂的、日期稀疏矩阵的、对数的、甚至完全自定义的维度。
    动画展现：在改变数据、更新颜色和添加数据时，均有开箱即用的动画效果。

    官方链接

    官网地址：https://chartjs.bootcss.com

    官方Github 地址：https://github.com/chartjs/Ch...

    下载与使用

    使用 npm 下载

    npm install chart.js --save

    在对应使用的 page 页面中

    import Chart from 'chart.js'

    实例说明

    新建一个 page 页面

    cd 工程的目录

    ionic generate page report-demo

    report-demo.html

    <ion-header>
  <ion-navbar>
    <ion-title>图形化报表界面</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
    <ion-card>
        <ion-card-header>Pie Chart</ion-card-header>
        <ion-card-content>
           <!-- 由于是通过 canvas 绘制出图表，所以需要有一个 canvas 标签，并且通过 #pieCanvas 来获取dom -->
          <canvas #pieCanvas></canvas>
        </ion-card-content>
    </ion-card>
</ion-content>

    report-demo.ts

    import {Component, ViewChild} from '@angular/core';
import {IonicPage, NavController} from 'ionic-angular';
import chartJs from 'chart.js';

@IonicPage()
@Component({
  selector: 'page-report-demo',
  templateUrl: 'report-demo.html',
})
export class ReportDemoPage {
    // 获取到对应 canvas dom 元素
    @ViewChild('pieCanvas') pieCanvas;
    
    // 新建一个对象，作为初始化使用
    pieChart: any;
    
    constructor(public navCtrl: NavController) {
    }
    
    ngAfterViewInit() {
        // 初始化图表
        setTimeout(() => {
          this.pieChart = this.getPieChart();
        }, 350);
    }
    
 /**
   * 生成图表的公共方法
   * @param context 渲染的dom对象
   * @param chartType 生成图表的类型
   * @param data  生成图表的数据
   * @param options 生成图表的个性化参数
   */
  getChart(context, chartType, data, options?) {
    return new chartJs(context, {
      data,
      options,
      type: chartType,
    });
  }

  getPieChart() {
    const data = {
      labels: ['Red', 'Blue', 'Yellow'],
      datasets: [
        {
          data: [300, 50, 100],
          backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56'],
          hoverBackgroundColor: ['#FF6384', '#36A2EB', '#FFCE56']
        }]
    };

    return this.getChart(this.pieCanvas.nativeElement, 'pie', data);
  }
}

    图示：
    饼图

    给出一个完整的例子

    report-demo.html

    
<ion-header>
  <ion-navbar>
    <ion-title>图形化报表界面</ion-title>
  </ion-navbar>
</ion-header>


<ion-content padding>

  <ion-card>
    <ion-card-header>Pie Chart</ion-card-header>
    <ion-card-content>
      <canvas #pieCanvas></canvas>
    </ion-card-content>
  </ion-card>

  <ion-card>
    <ion-card-header>Bar Chart</ion-card-header>
    <ion-card-content>
      <canvas #barCanvas></canvas>
    </ion-card-content>
  </ion-card>

  <ion-card>
    <ion-card-header>Doughnut Chart</ion-card-header>
    <ion-card-content>
      <canvas #doughnutCanvas></canvas>
    </ion-card-content>
  </ion-card>

  <ion-card>
    <ion-card-header>Half Doughnut Chart</ion-card-header>
    <ion-card-content>
      <canvas #halfDoughnutCanvas></canvas>
    </ion-card-content>
  </ion-card>

  <ion-card>
    <ion-card-header>Line Chart</ion-card-header>
    <ion-card-content>
      <canvas #lineCanvas></canvas>
    </ion-card-content>
  </ion-card>

  <ion-card>
    <ion-card-header>Radar Chart</ion-card-header>
    <ion-card-content>
      <canvas #radarCanvas></canvas>
    </ion-card-content>
  </ion-card>

  <ion-card>
    <ion-card-header>Polar Area Chart</ion-card-header>
    <ion-card-content>
      <canvas #polarCanvas></canvas>
    </ion-card-content>
  </ion-card>

  <ion-card>
    <ion-card-header>Bubble Chart</ion-card-header>
    <ion-card-content>
      <canvas #bubbleCanvas></canvas>
    </ion-card-content>
  </ion-card>

  <ion-card>
    <ion-card-header>Mixed Chart</ion-card-header>
    <ion-card-content>
      <canvas #mixedCanvas></canvas>
    </ion-card-content>
  </ion-card>

</ion-content>

    report-demo.ts

    import {Component, ViewChild} from '@angular/core';
import {IonicPage, NavController} from 'ionic-angular';
import chartJs from 'chart.js';

@IonicPage()
@Component({
  selector: 'page-report-demo',
  templateUrl: 'report-demo.html',
})
export class ReportDemoPage {

  @ViewChild('barCanvas') barCanvas;
  @ViewChild('doughnutCanvas') doughnutCanvas;
  @ViewChild('halfDoughnutCanvas') halfDoughnutCanvas;
  @ViewChild('lineCanvas') lineCanvas;
  @ViewChild('radarCanvas') radarCanvas;
  @ViewChild('polarCanvas') polarCanvas;
  @ViewChild('pieCanvas') pieCanvas;
  @ViewChild('bubbleCanvas') bubbleCanvas;
  @ViewChild('mixedCanvas') mixedCanvas;

  barChart: any;
  doughnutChart: any;
  halfDoughnutChart: any;
  lineChart: any;
  radarChart: any;
  polarAreaChart: any;
  pieChart: any;
  bubbleChart: any;
  mixedChart: any;

  constructor(public navCtrl: NavController) {
  }

  ngAfterViewInit() {

    setTimeout(() => {
      this.barChart = this.getBarChart();
      this.doughnutChart = this.getDoughnutChart();
      this.halfDoughnutChart = this.getHalfDoughnutChart();
    }, 150);

    setTimeout(() => {
      this.lineChart = this.getLineChart();
      this.radarChart = this.getRadarChart();
      this.polarAreaChart = this.getPolarAreaChart();
    }, 250);

    setTimeout(() => {
      this.bubbleChart = this.getBubbleChart();
      this.mixedChart = this.getMixedChart();
      this.pieChart = this.getPieChart();
    }, 350);

  }

  /**
   * 生成图表的公共方法
   * @param context 渲染的dom对象
   * @param chartType 生成图表的类型
   * @param data  生成图表的数据
   * @param options 生成图表的个性化参数
   */
  getChart(context, chartType, data, options?) {
    return new chartJs(context, {
      data,
      options,
      type: chartType,
    });
  }

  getMixedChart() {
    const data = {
      labels: ['Item 1', 'Item 2', 'Item 3'],
      datasets: [
        {
          type: 'bar',
          label: 'Bar Component',
          data: [10, 20, 30],
          backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56'],
        },
        {
          type: 'line',
          label: 'Line Component',
          data: [30, 20, 10],
          backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56'],
        }
      ]
    };

    return this.getChart(this.mixedCanvas.nativeElement, 'bar', data);

  }

  getPieChart() {
    const data = {
      labels: ['Red', 'Blue', 'Yellow'],
      datasets: [
        {
          data: [300, 50, 100],
          backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56'],
          hoverBackgroundColor: ['#FF6384', '#36A2EB', '#FFCE56']
        }]
    };

    return this.getChart(this.pieCanvas.nativeElement, 'pie', data);

  }

  getPolarAreaChart() {
    const data = {
      datasets: [{
        data: [11, 16, 7, 3, 14],
        backgroundColor: ['#FF6384', '#4BC0C0', '#FFCE56', '#E7E9ED', '#36A2EB'],
        label: 'My dataset' // for the legend
      }],
      labels: ['Red', 'Green', 'Yellow', 'Grey', 'Blue']
    };

    const options = {
      elements: {
        arc: {
          borderColor: '#000000'
        }
      }
    };

    return this.getChart(this.polarCanvas.nativeElement, 'polarArea', data, options);
  }

  getBubbleChart() {
    const data = {
      datasets: [
        {
          label: 'First Dataset',
          data: [
            {x: 20, y: 30, r: 15},
            {x: 40, y: 10, r: 10},
          ],
          backgroundColor: '#FF6384',
          hoverBackgroundColor: '#FF6384',
        }]
    };

    const options = {
      elements: {
        points: {
          borderWidth: 1,
          borderColor: 'rgb(0, 0, 0)'
        }
      }
    };

    return this.getChart(this.bubbleCanvas.nativeElement, 'bubble', data, options);
  }

  getRadarChart() {
    const data = {
      labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
      datasets: [
        {
          label: 'My First dataset',
          backgroundColor: 'rgba(179,181,198,0.2)',
          borderColor: 'rgba(179,181,198,1)',
          pointBackgroundColor: 'rgba(179,181,198,1)',
          pointBorderColor: '#fff',
          pointHoverBackgroundColor: '#fff',
          pointHoverBorderColor: 'rgba(179,181,198,1)',
          data: [65, 59, 90, 81, 56, 55, 40]
        },
        {
          label: 'My Second dataset',
          backgroundColor: 'rgba(255,99,132,0.2)',
          borderColor: 'rgba(255,99,132,1)',
          pointBackgroundColor: 'rgba(255,99,132,1)',
          pointBorderColor: '#fff',
          pointHoverBackgroundColor: '#fff',
          pointHoverBorderColor: 'rgba(255,99,132,1)',
          data: [28, 48, 40, 19, 96, 27, 100]
        }
      ]
    };

    const options = {
      scale: {
        reverse: true,
        ticks: {
          beginAtZero: true
        }
      }
    };

    return this.getChart(this.radarCanvas.nativeElement, 'radar', data, options);
  }

  getDoughnutChart() {
    const 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']
      }]
    };

    return this.getChart(this.doughnutCanvas.nativeElement, 'doughnut', data);
  }

  getHalfDoughnutChart() {
    const 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']
      }]
    };

    const options = {
      circumference: Math.PI,
      rotation: 1.0 * Math.PI
    };

    return this.getChart(this.halfDoughnutCanvas.nativeElement, 'doughnut', data, options);
  }

  getBarChart() {
    const 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)'
        ],
        borderColor: [
          'rgba(255,99,132,1)',
          'rgba(54, 162, 235, 1)',
          'rgba(255, 206, 86, 1)',
          'rgba(75, 192, 192, 1)',
          'rgba(153, 102, 255, 1)',
          'rgba(255, 159, 64, 1)'
        ],
        borderWidth: 1
      }]
    };

    const options = {
      scales: {
        yAxes: [{
          ticks: {
            beginAtZero: true
          }
        }]
      }
    };

    return this.getChart(this.barCanvas.nativeElement, 'bar', data, options);
  }

  getLineChart() {
    const data = {
      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
      datasets: [
        {
          label: 'My First dataset',
          fill: false,
          lineTension: 0.1,
          backgroundColor: 'rgba(75,192,192,0.4)',
          borderColor: 'rgba(75,192,192,1)',
          borderCapStyle: 'butt',
          borderDash: [],
          borderDashOffset: 0.0,
          borderJoinStyle: 'miter',
          pointBorderColor: 'rgba(75,192,192,1)',
          pointBackgroundColor: '#fff',
          pointBorderWidth: 1,
          pointHoverRadius: 5,
          pointHoverBackgroundColor: 'rgba(75,192,192,1)',
          pointHoverBorderColor: 'rgba(220,220,220,1)',
          pointHoverBorderWidth: 2,
          pointRadius: 1,
          pointHitRadius: 10,
          data: [65, 59, 80, 81, 56, 55, 40],
          spanGaps: false,
        },
        {
          label: 'My Second dataset',
          fill: false,
          lineTension: 0.1,
          backgroundColor: 'rgba(175,92,192,0.4)',
          borderColor: 'rgba(31,156,156,1)',
          borderCapStyle: 'butt',
          borderDash: [5, 8],
          borderDashOffset: 0.0,
          borderJoinStyle: 'miter',
          pointBorderColor: 'rgba(31,156,156,1)',
          pointBackgroundColor: '#fff',
          pointBorderWidth: 1,
          pointHoverRadius: 5,
          pointHoverBackgroundColor: 'rgba(31,156,156,1)',
          pointHoverBorderColor: 'rgba(220,220,220,1)',
          pointHoverBorderWidth: 2,
          pointRadius: 1,
          pointHitRadius: 10,
          data: [15, 39, 50, 81, 51, 55, 30],
          spanGaps: false,
        }
      ]
    };

    return this.getChart(this.lineCanvas.nativeElement, 'line', data);
  }
}

    图示：
    由于页面比较长，就分开截图的。
    完整截图

    ionic
    Wayfreem
    241 声望33 粉丝

    一个后端工程师，偏偏喜欢前端。

    « 上一篇
    ionic3学习之Events
    下一篇 »
    ionic3学习之聊天界面开发

    引用和评论

    被 1 篇内容引用
    推荐阅读
    头像
    Spring boot 集成 ActiveMQ

    Wayfreem赞 2阅读 3.6k

    0 条评论
    得票最新