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 相关文章推荐
xml分页+ajax请求数据源+dom取结果实例代码
Oct 31 Javascript
键盘KeyCode值列表汇总
Nov 26 Javascript
纯javascript模仿微信打飞机小游戏
Aug 20 Javascript
Javascript简单实现面向对象编程继承实例代码
Nov 27 Javascript
Bootstrap精简教程
Nov 27 Javascript
jQuery使用模式窗口实现在主页面和子页面中互相传值的方法
Mar 01 Javascript
实现JavaScript的组成----BOM和DOM详解
May 18 Javascript
jq给页面添加覆盖层遮罩的实例
Feb 16 Javascript
本地存储localStorage用法详解
Jul 31 Javascript
webpack配置之后端渲染详解
Oct 26 Javascript
详解微信小程序开发用户授权登陆
Apr 24 Javascript
JavaScript如何判断input数据类型
Feb 06 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加密解密函数authcode的用法详细解析
2013/10/28 PHP
ECshop 迁移到 PHP7版本时遇到的兼容性问题
2016/02/15 PHP
php微信公众号开发之简答题
2018/10/20 PHP
php中yii框架实例用法
2020/12/22 PHP
javaScript 数值型和字符串型之间的转换
2009/07/25 Javascript
JQuery实现倒计时按钮具体方法
2013/11/14 Javascript
扩展jQuery对象时如何扩展成员变量具体怎么实现
2014/04/25 Javascript
使用Node.js配合Nginx实现高负载网络
2015/06/28 Javascript
每天一篇javascript学习小结(String对象)
2015/11/18 Javascript
Javascript基础_标记文字的实现方法
2016/06/14 Javascript
Javascript实现汉字和拼音互转的终极方案
2016/10/19 Javascript
详解nodejs express下使用redis管理session
2017/04/24 NodeJs
JavaScript内存泄漏的处理方式
2017/11/20 Javascript
vue脚手架及vue-router基本使用
2018/04/09 Javascript
react 应用多入口配置及实践总结
2018/10/17 Javascript
JavaScript中的 new 命令
2019/05/22 Javascript
Electron + vue 打包桌面操作流程详解
2019/06/24 Javascript
JavaScript如何处理移动端拍摄图片旋转问题
2019/11/16 Javascript
ant-design-vue按需加载的坑的解决
2020/05/14 Javascript
JS typeof fn === 'function' &amp;&amp; fn()详解
2020/08/22 Javascript
python中list循环语句用法实例
2014/11/10 Python
Python中Django发送带图片和附件的邮件
2017/03/31 Python
Ubuntu安装Jupyter Notebook教程
2017/10/18 Python
对numpy的array和python中自带的list之间相互转化详解
2018/04/13 Python
Python 通过打码平台实现验证码的实现
2019/05/13 Python
详解python安装matplotlib库三种失败情况
2020/07/28 Python
CSS3系列之3D制作方法案例
2017/08/14 HTML / CSS
介绍一下linux的文件权限
2014/07/20 面试题
亿企通软件测试面试题
2012/04/10 面试题
少先队入队活动方案
2014/02/08 职场文书
学校三八妇女节活动情况总结
2014/03/09 职场文书
2014幼儿园教师师德师风演讲稿
2014/09/10 职场文书
作风建设年度心得体会
2014/10/29 职场文书
2019升学宴主持词范本5篇
2019/10/09 职场文书
创业计划书之网吧
2019/10/10 职场文书
Goland使用Go Modules创建/管理项目的操作
2021/05/06 Golang