如何在Angular2中使用SVG自定义图表？针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。
成都一家集口碑和实力的网站建设服务商，拥有专业的企业建站团队和靠谱的建站技术，10年企业及个人网站建设经验 ,为成都上1000+客户提供网页设计制作,网站开发,企业网站制作建设等服务,包括成都营销型网站建设，品牌网站建设，同时也为不同行业的客户提供做网站、网站建设的服务,包括成都电商型网站制作建设,装修行业网站制作建设，传统机械行业网站建设,传统农业行业网站制作建设。在成都做网站,选网站制作建设服务商就选成都创新互联。
demo：
html:
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 //条形图之间的距离
};效果：
源代码：
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 = []; // Y轴刻度值
Xscale: Array = []; // X轴刻度值
XgapWidth: number; // X轴刻度之间的间隙宽度
data: Array = [];
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
{{scale.label}}
{{scale.label}}
bar
{{item.value}}
0">
{{item.value}}
line
{{item.value}}
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;关于如何在Angular2中使用SVG自定义图表问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注创新互联行业资讯频道了解更多相关知识。
本文名称：如何在Angular2中使用SVG自定义图表
转载来于：
http://cdxtjz.cn/article/geecgd.html
