ionic3学习之集成ChartJs图表控件

最新推荐文章于 2021-09-24 16:36:08 发布
最新推荐文章于 2021-09-24 16:36:08 发布
阅读量146 收藏
点赞数
文章标签： javascript ViewUI
原文链接：https://segmentfault.com/a/1190000015112088
版权

简介

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

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

weixin_33861800
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ChartJS-示例
02-14
ChartJS-示例
Ionic中使用Chart.js进行图表展示以及在iOS/Android中的性能差异
weixin_34205826的博客
11-17 104
Angular Chart 简介 在之前的文章中介绍了使用 Ionic 开发跨平台（iOS &amp; Android）应用中遇到的一些问题的解决方案。 在更新0.1.3版本的过程中遇到了需要使用图表展示一周搜索引擎抓取变化的需求，因为之前使用过 Chart.js, 所以去查了些资料果然是有既有的模块的。 Angular Chart 就是基于 Chart.js 以及 Angular 构件的图...
ionic2实战-使用Chart.js
sam0535的专栏
09-14 784
前言 Chart.js官网Chart.js中文文档 安装Chart.js 执行cnpm install typings -g,全局安装Typings 执行typings search chart.js,使用Typings搜索Chart.js 安装和使用typings 进入app目录执行typings install chart.js --source npm
Ionic2之显示图表（chart）曲线dygraph（angularjs2使用第三方js库）
Robert Zhang
03-28 3948
ionic2使用第三方图表显示插件（dygraph）
Ionic3-D3-Chart:Ionic3 D3.js
05-15
【标题】"Ionic3-D3-Chart：使用D3.js在Ionic3框架中的图表应用" 【描述】"这个项目展示了如何在Ionic3框架内集成D3.js库来创建动态、交互式的图表。它是一个Android APK应用程序，允许用户在移动设备上体验基于D3...
ionic3-chartjs:结合使用ionic的chart.js示例
05-17
在本文中，我们将深入探讨如何在 Ionic 3 项目中集成和使用 Chart.js，这是一个流行的JavaScript库，用于创建各种图表。首先，让我们了解 Ionic 和 Chart.js 的基本概念。 Ionic 是一个开源的移动应用开发框架，它...
Ionic3 UI组件之autocomplete详解
08-30
在移动应用开发中，用户界面（UI）组件扮演着至关重要的角色，它们...这体现了开源软件的强大之处，也展示了 Ionic3 的灵活性和可扩展性。学习和掌握这样的集成技巧，对于提升开发效率和优化应用体验有着重要的意义。
ionic实战二十二中实现m3u8播放js文件
08-17
总的来说，通过结合Ionic的响应式移动应用开发能力和HLS.js库，我们可以构建一个功能完善的M3U8流媒体播放器，覆盖多种设备和浏览器环境。记得在实际项目中进行充分的测试和优化，以确保流媒体内容在各种条件下的...
Ionic3 UI组件之Gallery Modal详解
08-30
总之，`Ionic3 UI组件之Gallery Modal`为开发者提供了一个强大且易于集成的图片预览解决方案。它允许你轻松地展示网络图片和本地图片，通过手势操作增强用户交互性，是构建移动应用时不可多得的UI组件。在实际开发中...
Chart.js画曲线图、柱状图、蛛网图、极地区域图、饼图和环形图实例
06-22
Chart.js画曲线图、柱状图、蛛网图、极地区域图、饼图和环形图，很实用，html页面打开就能看效果，在example文件夹下，原网页是 https://github.com/chartjs/Chart.js可自行下载
Chart.js学习资料实例案例
10-26
Chart.js学习资料实例，全部资料 这个是目前最新版，与旧版例程有了很大的变化，值得一看。 内含多个完整的demo，包括静态和动态。chart.js是一款基于HTML5 Canvas的图表插件，其功能非常强大，不仅提供了常见的柱形图、折线图、饼状图，还提供了环形图、雷达图，样式外观多样，图表的色彩搭配也比较清新
Chartjs曲线图、柱状图、饼状图等多种统计图
11-08
Chartjs曲线图、柱状图、饼状图等多种统计图 Chartjs曲线图、柱状图、饼状图等多种统计图 Chartjs曲线图、柱状图、饼状图等多种统计图
Chartjs：所有条形图均包含JavScript和Ajax
02-05
Chartjs：所有条形图均包含JavScript和Ajax
chart.js实例之曲线图
编程老王
09-24 2702
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> 　<title>Graph</title> </head> <body> <h1>line graph</h1> <canvas id="myLine2Chart"></canvas> <script src=.
使用Chart.js创建漂亮的图表
01-07 170
内容为王 。 我们都听到或读到这句话，表达多么好的文本可以驱动的，因为搜索引擎的效果转换。 然而，虽然文字是优秀的搜索引擎，有时人们可以更好地通过看图片或图表理解的概念。 例如，如果你的网站是专门关于调查，有关的调查描述是重要的，但汇总调查的数据图表是为您的用户更强大。 在本文中，我将向你介绍所谓chart.js之一个JavaScript库，采用HTML5的canvas元素绘制在页面上的图表。...
利用chartjs生成图表
流星球
12-13 2576
说明下面是如何利用chartjs生成图表，引用好Chart.js之后我们就可以直接使用了。很方便就可以生成了。还有很多其他格式，以后会再详细介绍如何使用。html<canvas id="canvas" height="400" width="500"></canvas>JSvar json = [ {"company_name":"project A", "present_worth":"81531
ionic4 使用charts绘制图表
我只是心态好
01-13 1929
  最近在体测系统中，用到了图表的知识，接下来就简单分享一下图表的制作过程。 1. 首先要安装angular2图表和Charts.js 输入命令： npm install ng2-charts --save npm install chart.js --save 在该页面所在module中添加：如（achieve.module.ts） import { ChartsModule ...
ionic3移动应用开发全面指南（修订版）
"Mobile App Development with Ionic3, Revised Edition" 是一本由 Chris Griffith 所著的专业书籍，针对移动应用开发提供深入指南，特别聚焦于使用 Ionic 3、Angular 和 Cordova 进行跨平台应用程序的构建。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值