ionic3学习之集成ChartJs图表控件

异步流沙
• 阅读 3496

简介

按照官方的说法：为设计和开发人员准备的简单、灵活的 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);
  }
}

图示：
ionic3学习之集成ChartJs图表控件

给出一个完整的例子

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);
  }
}

图示：
由于页面比较长，就分开截图的。
ionic3学习之集成ChartJs图表控件

ionic
点赞
收藏
评论区
推荐文章
黎明之道 黎明之道
•
4年前
python之利用pyecharts可视化（各种图表的绘制）
pyecharts可视化pyecharts是基于Echart图表的一个类库，而Echart是百度开源的一个可视化JavaScript库。简介：pyecharts主要基于web浏览器进行显示，绘制的图形比较
2379
0
0
可莉 可莉
•
4年前
10款强大的开源 Javascript 图表库
1、EChartsECharts由百度前端技术部开发的，是一个纯Javascript的图表库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器(IE8/9/10/11、Chrome、Firefox、Safari等)，底层依赖轻量级的Canvas类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。
1516
0
0
Stella981 Stella981
•
4年前
LightningChart.NET使用两个BarSeries创建简单的2D图表
本教程介绍了如何使用两个BarSeries创建简单的2D图表。BarSeries将数据值表示为矩形条，并且可以用于以非常清晰的方式可视化数据之间的差异和方差。在本教程中，BarSeries用于表示两年期间的每月平均温度。本教程假定您已在WinForms或WPF应用程序上使用LightningChart创建了新图表。如果没有，请按照我们的简
1155
0
0
Wesley13 Wesley13
•
4年前
Spread for Windows Forms快速入门(16)
Spread支持85种丰富多彩的图表效果。可以在Spread设计器中基于工作表的数据直接生成图表，操作简单。同时，软件人员还可以在VisualStudio设计环境中定制图表的所有元素，包括标题、序列、轴、样式、图例等。这一篇介绍如何用Spread设计器创建和编辑图表。准备图表的数据首先要启动Spread设计器。你可以在VisualStudio
1118
0
0
Stella981 Stella981
•
4年前
Apache ECharts 5 震撼发布：五大模块，十五项新特性全面升级！
数据可视化在过去的几年中得到了长足的发展。开发者对于可视化产品的期待不再是简单的图表创建工具，而在交互、性能、数据处理等方面有了更高级的需求。ApacheECharts始终致力于让开发者以更方便的方式创造灵活丰富的可视化作品。在最新推出的ApacheECharts5，我们着力加强了图表的叙事能力，让开发者可以以更简单的方式，讲述数据背后的故事。
1317
0
0
Stella981 Stella981
•
4年前
AnyChart使用JavaScript构建箱形图
AnyChart(https://www.oschina.net/action/GoToLink?urlhttps%3A%2F%2Fwww.evget.com%2Fproduct%2F1009)是基于JavaScript(HTML5)的图表控件。使用AnyChart控件，可创建跨浏览器和跨平台的交互式图表和仪表。AnyChart图表目前已被很多知
984
0
0
铁扇公主 铁扇公主
•
2年前
Mac电脑好用的绘图软件 OmniGraffle Pro for mac
OmniGrafflePro是一款专业的图形设计和绘图软件，该软件旨在帮助用户创建精美的图表、流程图、组织结构图、原型设计和其他可视化图形。OmniGrafflePro提供了丰富的工具和功能，使用户能够轻松制作复杂的图形和图表。以下是OmniGraffle
858
0
0
绣鸾 绣鸾
•
2年前
OmniGraffle Pro for mac(图表绘制软件) v7.22.3
是一款专业的绘图软件，具有多种功能，包括：绘制图表：OmniGrafflePro可以创建各种类型的图表，包括流程图、组织图、UML图、网络图等等。它还支持导入和导出多种文件格式，如PDF、SVG、Visio、PNG、JPG等。绘图工具：OmniGraffl
709
0
0
绣鸾 绣鸾
•
2年前
OmniGraffle Pro 7 for mac(制图软件)
是一款专业的绘图软件，具有多种功能，包括：绘制图表：OmniGrafflePro可以创建各种类型的图表，包括流程图、组织图、UML图、网络图等等。它还支持导入和导出多种文件格式，如PDF、SVG、Visio、PNG、JPG等。绘图工具：OmniGraffl
695
0
0
陈杨 陈杨
•
8个月前
鸿蒙5莓创雷达图表tooltip详解
大家好，欢迎回来鸿蒙5莓创图表组件的专场，我们这一期来深入讲解雷达图组件中最重要的交互功能——tooltip（提示层）属性的完整用法。作为数据可视化的"信息桥梁"，tooltip的灵活配置能极大提升图表的信息传达效率，下面我们以分层递进的方式全面解析每个配
450
0
0
异步流沙
异步流沙
Lv1
我不躲不藏，等生活爱我。
文章
2
粉丝
0
获赞
0
热门文章
Java 计算辅助神器