Angular2使用SVG自定义图表(条形图、折线图)组件示例


Posted in Javascript onMay 10, 2019

本文实例讲述了Angular2使用SVG自定义图表(条形图、折线图)组件。分享给大家供大家参考,具体如下:

要求:用户将数据作为参数传进来,通过类型决定渲染何种类型的图标。

demo:

html:

<ngo-chart [inputParams]="options"></ngo-chart>

ts:

options = {
    type: 'line',   //图表类型
    xAxis: {      //X轴的数据
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {      //X轴的数据
      data: [120, 220, 150, 111, -150, 55, 60],
    },
    width: 600,    //宽
    height: 500,    //高
    dataPadding: 8   //条形图之间的距离
  };

效果:

Angular2使用SVG自定义图表(条形图、折线图)组件示例

源代码:

import {
  Input,
  OnInit,
  ViewChild,
  Component,
  ViewEncapsulation,
  ElementRef,
  AfterViewInit,
  ChangeDetectorRef,
} from '@angular/core';
import { NgoChartSvgParams, Scale, Axis, Chart } from './chart-svg-params';
@Component({
  selector: 'ngo-chart-svg',
  templateUrl: './chart-svg.html',
  styleUrls: ['./chart-svg.scss'],
  encapsulation: ViewEncapsulation.Native
})
export class NgoChartSvg implements OnInit, AfterViewInit {
  @Input() inputParams: NgoChartSvgParams;
  @ViewChild('svg') svg: ElementRef;
  @ViewChild('polyline') polyline: ElementRef;
  params: NgoChartSvgParams;
  AxisY: Axis; // Y轴
  AxisX: Axis; // X轴
  valueToPxRatio: number; // 值转px的比率
  Y0: number; // 坐标轴 (0,0)的Y轴
  Yscale: Array<Scale> = []; // Y轴刻度值
  Xscale: Array<Scale> = []; // X轴刻度值
  XgapWidth: number; // X轴刻度之间的间隙宽度
  data: Array<Chart> = [];
  color: string;
  type: string;
  polyLinePoints: string;
  polyLineLength: number;
  constructor(
    private ele: ElementRef,
    private cd: ChangeDetectorRef
  ) { }
  ...
 ngOnInit() {
    this.initParams();
    const svg = this.svg.nativeElement;
    const _width = this.params.width;
    const _height = this.params.height;
    svg.setAttribute('width', _width);
    svg.setAttribute('height', _height);
    // 绘制 y轴
    this.drawAxisY();
    this.drawScaleY();
    // 绘制 x轴
    this.drawAxisX();
    this.drawScaleX();
    this.drawRect();
    if (this.params.type === 'line') {
      this.drawLine();
    }
  }
  ngAfterViewInit() {
    if (this.polyline) {
      this.polyLineLength = this.polyline.nativeElement.getTotalLength();
      this.cd.detectChanges();
    }
  }
}

html

<svg #svg>
  <!-- Y轴 -->
  <g>
    <line [attr.x1]="AxisY.x1" [attr.y1]="AxisY.y1+15" [attr.x2]="AxisY.x2" [attr.y2]="AxisY.y2" [attr.stroke]="color" [attr.fill]="color"
      style="stroke-width:3" />
    <polygon [attr.points]="AxisY.arrow" />
    <ng-container *ngFor="let scale of Yscale">
      <line class="dash" [attr.x1]="scale.x1" [attr.x2]="scale.x2" [attr.y1]="scale.y1" [attr.y2]="scale.y2" stroke="rgba(0,0,0,0.3)"
      />
      <text class="_label" [attr.x]="scale.x1-5" style="text-anchor: end" [attr.y]="scale.y1" [attr.fill]="color" [attr.fill]="color">{{scale.label}}</text>
    </ng-container>
  </g>
  <!-- X轴 -->
  <g>
    <line [attr.x1]="AxisX.x1-15" [attr.x2]="AxisX.x2" [attr.y1]="AxisX.y1" [attr.y2]="AxisX.y2" [attr.stroke]="color" [attr.fill]="color"
      style="stroke-width:3" />
    <polygon [attr.points]="AxisX.arrow" />
    <ng-container *ngFor="let scale of Xscale">
      <line [attr.x1]="scale.x1" [attr.x2]="scale.x2" [attr.y1]="scale.y1" [attr.y2]="scale.y2" [attr.stroke]="color" [attr.fill]="color"
        style="stroke-width:1" />
      <text class="_label" [attr.x]="scale.x1-XgapWidth/2" [attr.y]="AxisY.y1+15" [attr.fill]="color" style="text-anchor: middle;">{{scale.label}}</text>
    </ng-container>
  </g>
  <!-- 矩形 -->
  <ng-container *ngIf="type==='bar'">
    <text x="10" y="20" fill="red">bar</text>
    <g>
      <ng-container *ngFor="let item of data">
        <ng-container *ngIf="item.value<=0">
          <rect class="_rect" [attr.x]="item.x" [attr.y]="item.y" [attr.width]="item.w" [attr.height]="item.h" fill="color">
            <animate attributeName="height" [attr.from]="item.h*0.6" [attr.to]="item.h" begin="0s" dur="1.1s" />
          </rect>
          <text [attr.x]="item.x+item.w/2" [attr.y]="item.y+item.h-5" fill="white" style="text-anchor: middle;">{{item.value}}</text>
        </ng-container>
        <ng-container *ngIf="item.value>0">
          <rect [attr.x]="item.x" [attr.y]="item.y" [attr.width]="item.w" [attr.height]="item.h" fill="color">
            <animate attributeName="y" [attr.from]="item.y+item.h*0.4" [attr.to]="item.y" begin="0s" dur="1.1s" />
            <animate attributeName="height" [attr.from]="item.h*0.6" [attr.to]="item.h" begin="0s" dur="1.1s" />
          </rect>
          <text class="_label" [attr.x]="item.x+item.w/2" [attr.y]="item.y+18" fill="white" style="text-anchor: middle;">{{item.value}}
            <animate attributeName="opacity" from="0" to="1" begin="0s" dur="1.1s" />
          </text>
        </ng-container>
      </ng-container>
    </g>
  </ng-container>
  <!--折线 -->
  <ng-container *ngIf="type==='line'">
    <text x="10" y="20" fill="red">line</text>
    <g>
      <polyline #polyline class="_polyline" [attr.points]="polyLinePoints" fill="none" [attr.stroke]='color' [attr.stroke-dasharray]="polyLineLength"
        [attr.stroke-dashoffset]="polyLineLength" />
      <ng-container *ngFor="let item of data">
        <circle [attr.cx]="item.x+item.w/2" [attr.cy]="item.y" r="2" [attr.fill]="color" [attr.stroke]='color' />
        <text class="_label" [attr.x]="item.x+item.w/2" [attr.y]="item.y+20" fill="white" style="text-anchor: middle;">{{item.value}}
          <animate attributeName="opacity" from="0" to="1" begin="0s" dur="1.1s" />
        </text>
      </ng-container>
    </g>
  </ng-container>
</svg>

css

svg {
 background: rgba(0, 0, 0, 0.2);
 border: 1px solid black;
}
svg * {
 position: static;
 font-size: 16px;
}
._polyline {
 fill: none;
 animation: lineMove 1.5s ease-in-out forwards;
}
@keyframes lineMove {
 to {
  stroke-dashoffset: 0;
 }
}

一、初始化参数

//首先获取传入的参数
 @Input() inputParams;
//初始化
 const _params: NgoChartSvgParams = {
   xAxis: this.inputParams.xAxis,
   yAxis: this.inputParams.yAxis,
   type: this.inputParams.type ? this.inputParams.type : 'bar',
   width: this.inputParams.width ? this.inputParams.width : 700,
   height: this.inputParams.height ? this.inputParams.height : 500,
   dataPadding: this.inputParams.dataPadding !== undefined ? this.inputParams.dataPadding : 8,
   YscaleNo: this.inputParams.YscaleNo >= 3 ? this.inputParams.YscaleNo : 6,
};
this.color = 'black';
this.type = _params.type;
this.params = _params;

二:绘制坐标轴Y轴

const _height = this.params.height;
const _pad = this.params.padding;
const _arrow = _pad + ',' + (_pad - 5) + ' ' + (_pad - 6) + ',' + (_pad + 12) + ' ' + (_pad + 6) + ',' + (_pad + 12);
 this.AxisY = {
   x1: _pad,
   y1: _height - _pad,
   x2: _pad,
   y2: _pad,
   arrow: _arrow
};

三、绘制Y轴的刻度

const _height = this.params.height;
const _width = this.params.width;
// 显示label的边距
const _padding = this.params.padding;
const _Ydata = this.params.yAxis.data;
// 显示的刻度数
const _YscaleNo = this.params.YscaleNo;
const _dataMax = this.getMinAndMaxData(_Ydata).dataMax;
const _dataMin = this.getMinAndMaxData(_Ydata).dataMin;
let _YminValue;
let _YgapValue;
if (_dataMin < 0) {
   _YgapValue = Math.ceil((_dataMax - _dataMin) / (_YscaleNo) / 10) * 10;
   _YminValue = Math.floor(_dataMin / _YgapValue) * _YgapValue;
} else {
   _YgapValue = Math.ceil((_dataMax) / (_YscaleNo) / 10) * 10;
   _YminValue = 0;
}
// Y轴坐标点
const _y2 = this.AxisY.y2;
const _y1 = this.AxisY.y1;
const _x1 = this.AxisY.x1;
// Y轴刻度的间隙宽度
const _YgapWidth = (_y1 - _y2) / (this.params.YscaleNo);
this.valueToPxRatio = _YgapValue / _YgapWidth;
// 坐标轴(0,0)的Y轴坐标
const _Y0 = _y1 - Math.abs(_YminValue / this.valueToPxRatio);
this.Y0 = _Y0;
for (let i = 0; i < this.params.YscaleNo; i++) {
   const _obj: Scale = { x1: 0, x2: 0, y1: 0, y2: 0, label: '', value: 0 };
   _obj.x1 = _x1;
   _obj.y1 = _y1 - _YgapWidth * i;
   _obj.x2 = _x1 + _width - 2 * _padding;
   _obj.y2 = _y1 - _YgapWidth * i;
   _obj.label = _YminValue + _YgapValue * i;
   this.Yscale.push(_obj);
}

四、绘制X坐标轴

const _width = this.params.width;
// 显示label的边距
const _pad = this.params.padding;
const _x2 = _width - _pad;
const _y2 = this.Y0;
const _arrow = (_x2 + 5) + ',' + _y2 + ' ' + (_x2 - 10) + ',' + (_y2 - 6) + ' ' + (_x2 - 10) + ',' + (_y2 + 6);
this.AxisX = {
  x1: _pad,
  y1: _y2,
  x2: _x2,
  y2: _y2,
  arrow: _arrow
};

五、绘制X轴刻度

const _width = this.params.width;
const _Xdata = this.params.xAxis.data;
const _Ydata = this.params.yAxis.data;
const Y0 = this.Y0;
const _x1 = this.AxisX.x1;
const _x2 = this.AxisX.x2;
const XgapWidth = ((_x2 - _x1) / (this.params.xAxis.data.length + 1));
this.XgapWidth = XgapWidth;
for (let i = 0; i < _Xdata.length; i++) {
   const _obj: Scale = { x1: 0, x2: 0, y1: 0, y2: 0, value: 0, label: '' };
   _obj.y1 = Y0;
   _obj.y2 = Y0 + 5;
   _obj.label = _Xdata[i];
   _obj.value = _Ydata[i];
   _obj.x1 = _x1 + XgapWidth * (i + 1);
   _obj.x2 = _x1 + XgapWidth * (i + 1);
   this.Xscale.push(_obj);

六、绘制矩形

const _value = this.params.yAxis.data;
const _dataPadding = this.params.dataPadding;
const _XgapWidth = this.XgapWidth;
for (let i = 0; i < _value.length; i++) {
   const element = _value[i];
   const _obj: Chart = { x: 0, y: 0, w: 0, h: 0, value: 0 };
   _obj.w = _XgapWidth - 2 * _dataPadding;
   _obj.x = this.Xscale[i].x1 - _obj.w - _dataPadding;
   _obj.h = Math.abs(this.Xscale[i].value / this.valueToPxRatio);
   _obj.value = this.Xscale[i].value;
   if (this.Xscale[i].value >= 0) {
      _obj.y = this.Y0 - (this.Xscale[i].value) / this.valueToPxRatio;
   } else {
      _obj.y = this.Y0;
   }
      this.data.push(_obj);
   }
}

七、绘制折线

const _data = this.data;
let _str = '';
_data.forEach(ele => {
if (ele.value < 0) {
   ele.y = ele.y + ele.h;
}
   _str += (ele.x + ele.w / 2) + ',' + ele.y + ' ';
});
this.polyLinePoints = _str;

希望本文所述对大家AngularJS程序设计有所帮助。

Javascript 相关文章推荐
Jquery Ajax学习实例5 向WebService发出请求,返回泛型集合数据的异步调用
Mar 17 Javascript
jQuery 前的按键判断代码
Mar 19 Javascript
jquery显示和隐藏div特效实例
Feb 27 Javascript
jQuery选择器中含有空格的使用示例及注意事项
Aug 25 Javascript
javascript如何使用bind指定接收者
May 04 Javascript
JavaScript中双叹号!!作用示例介绍
Sep 21 Javascript
jQuery模拟物体自由落体运动(附演示与demo源码下载)
Jan 21 Javascript
使用vue.js实现checkbox的全选和多个的删除功能
Feb 17 Javascript
vue初尝试--项目结构(推荐)
Jan 30 Javascript
jQuery实现基本动画效果的方法详解
Sep 06 jQuery
vue项目中使用Svg的方法
Oct 24 Javascript
Vue中component标签解决项目组件化操作
Sep 04 Javascript
vue 实现搜索的结果页面支持全选与取消全选功能
May 10 #Javascript
Vue项目中配置pug解析支持
May 10 #Javascript
Angular2实现的秒表及改良版示例
May 10 #Javascript
node中IO以及定时器优先级详解
May 10 #Javascript
使用Node.js写一个代码生成器的方法步骤
May 10 #Javascript
Easyui 去除jquery-easui tab页div自带滚动条的方法
May 10 #jQuery
使用vue脚手架(vue-cli)搭建一个项目详解
May 09 #Javascript
You might like
PHP调用三种数据库的方法(2)
2006/10/09 PHP
PHP XML error parsing SOAP payload on line 1
2010/06/17 PHP
在Windows系统上安装PHP运行环境文字教程
2010/07/19 PHP
如何在symfony中导出为CSV文件中的数据
2011/10/06 PHP
PHP判断变量是否为0的方法
2014/02/08 PHP
php命名空间学习详解
2014/02/27 PHP
PHP实现单例模式最安全的做法
2014/06/13 PHP
PHP登录环节防止sql注入的方法浅析
2014/06/30 PHP
php车辆违章查询数据示例
2016/10/14 PHP
Laravel源码解析之路由的使用和示例详解
2018/09/27 PHP
jqeury eval将字符串转换json的方法
2011/01/20 Javascript
Javascript中的isNaN函数使用说明
2011/11/10 Javascript
浅析JavaScript中的CSS属性及命名规范
2013/11/28 Javascript
node.js中的fs.close方法使用说明
2014/12/17 Javascript
jquery删除指定子元素代码实例
2015/01/13 Javascript
javascript制作照片墙及制作过程中出现的问题
2016/04/04 Javascript
js实现移动端编辑添加地址【模仿京东】
2017/04/28 Javascript
详解JavaScript数组过滤相同元素的5种方法
2017/05/23 Javascript
手把手教你使用vue-cli脚手架(图文解析)
2017/11/08 Javascript
基于rollup的组件库打包体积优化小结
2018/06/18 Javascript
nodejs高大上的部署方式(PM2)
2018/09/11 NodeJs
微信js-sdk 录音功能的示例代码
2019/11/01 Javascript
react结合bootstrap实现评论功能
2020/05/30 Javascript
[07:03]显微镜下的DOTA2第九期——430圣堂刺客杀戮秀
2014/06/20 DOTA
[03:32]2014DOTA2西雅图邀请赛 CIS外卡赛赛前black专访
2014/07/09 DOTA
Django 中间键和上下文处理器的使用
2019/03/17 Python
详解python中自定义超时异常的几种方法
2019/07/29 Python
详解Python并发编程之创建多线程的几种方法
2019/08/23 Python
Pytorch中膨胀卷积的用法详解
2020/01/07 Python
对tensorflow中tf.nn.conv1d和layers.conv1d的区别详解
2020/02/11 Python
Django数据库操作之save与update的使用
2020/04/01 Python
全面介绍python中很常用的单元测试框架unitest
2020/12/14 Python
使用HTML5中的contentEditable来将多行文本自动增高
2016/03/01 HTML / CSS
CNC数控操作工岗位职责
2013/11/19 职场文书
关爱留守儿童倡议书
2014/04/15 职场文书
项目建议书模板
2014/05/12 职场文书