Angular2使用挽救(保存的简写)自定义图表（条形图、折线图)组件示例

本文实例讲述了Angular2使用挽救(保存的简写)自定义图表（条形图、折线图)组件。分享给大家供大家参考，具体如下：

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

演示：

html:

非政府组织图表[输入参数]='选项'/非政府组织图表ts :

options={ type: 'line '，//图表类型xaxis 3360 {//X轴的数据data: ['Mon '，' Tue '，' Wed '，' Thu '，' Sat '，' Sun'] }，yAxis: { //X轴的数据data: [120，220，150，111，-150，55，60]，}，width: 600，//宽高度： 500,//高数据添加： 8/条形图之间的距离};效果：

源代码：

从“@棱角分明/核心”导入{ Input、OnInit、ViewChild、Component、ViewEncapsulation、ElementRef、AfterViewInit、ChangeDetectorRef、}；从""导入{非图表参数，比例，轴，图表}。/chart-SVG-params '；@ Component({选择器： ' NGO-chart-SVG，templateUrl: ' ./chart-svg.html '，style URL 3360[]./chart-svg.scss']，封装：视图封装.原生})导出类NgoChartSvg实现OnInit，后视图init { @ Input()} Input params 3360 ngchartsvgparams；@ ViewChild(' SVG ')SVG : ElEMENTRef；@ViewChild('折线)polyline : elementrefparams 3360 ngochatsvgparams轴：轴；//Y轴AxisX:轴；//X轴valueToPxRatio:号；//值转像素的比率Y0:号；//坐标轴(0,0)的Y轴yscale : ArrayScale=[]；//Y轴刻度值xscale : Arrayscale=[]；//X轴刻度值XgapWidth:号；//X轴刻度之间的间隙宽度数据： ArrayChart=[]；颜色：字符串；型字符串；polyLinePoints:字符串；polyLineLength:号；构造函数（私有ele: ElementRef，私有cd: ChangeDetectorRef ) { }.ngOnInit(){ this。initparams()；const SVG=这个。SVG。原生元素；const _ width=this。参数。宽度；const _ height=this。参数。身高；svg.setAttribute('width '，_ width)；svg.setAttribute('height '，_ height)；//绘制y轴这个。draw axis()；这个。draw scaley()；//绘制x轴这个。drawAxisX()；这个。draw scalex()；这个。draw rect()；如果(这个。参数。type==' line '){ this。画线()；} } ngAfterViewInit(){ if(this。折线){这个。polylineength=这个。折线。原生元素。gettotallength()；这个。光盘。detectchanges()；} }}html

svg #svg！表示"有…的"轴-g线[attr。x1]=' axis。x1 '[attr。y1]=' axis。y1 15 '[attr。x2]=' axis。x2 '[attr。y2]=' axis。y2 '[attr。stroke]=' color '[attr。填充]=' color ' style='描边宽度33603 '/多边形[attr。points]=' axis。箭头'/ng-container * ngFOr='让Yscale的刻度' line class=' dash '[attr。x1[加在以-你结尾的法语词源的名词之后构成复数]轴-g线[attr。x1]=' x轴x1-15 '[attr。x2]=' x . x2轴'[attr。y1]=' x . y1轴'[attr。y2]=' x . y2轴'[attr。stroke]=' color '[attr。填充]=' color ' style='笔画宽度：3 '/多边形[attr。点]=' x轴箭头'/ng-container * ngFOr='让Xscale缩放'线[attr .{ { scale。标签} }/text/ng-container/g！-矩形-ng-container * ngIf=' type=' bar ' text x=' 10 ' y=' 20 ' fill=' red ' bar/text g-container * ngFOr=' let item of data ' ng-container * ngIf=' item。value=0 ' rect class=' _ rect '[attr。x]='项。x '[attr。y]='项。y '[attr。宽度]='项。w '[attr。高度]='项。h ' fill=' color ' animateributename { { item }。value } }/text/ng-container ng-container * Ngif=' item。值0 ' rect[attr。x]='项。x '[attr。y]='项。y '[attr。宽度]='项。w '[attr。高度]='项。h ' fill=' color ' animate AttributeNAmE=' y '[attr。from]='项。y项。h * 0.4 '[attr。to]='项。y ' begin=' 0s ' dur=' 1 ' .{{item.value}}动画属性名称='不透明度'从='0 '到=' 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折线#折线类=' _折线'[attr。points]=' polyLinePoints ' fill=' none '[attr。stroke]=' color '[attr。stroke-dash数组]=' polylineength '/ng-container * ngFOr=' let数据项' circle[attr。CX]='项目' {item.value}}动画属性名称='不透明度'从='0 '到=' 1 ' begin=' 0s ' dur=' 1.1s '/text/ng-container/g/ng-container/SVG CSS

svg { background: rgba(0，0，0，0.2)；border: 1px纯黑；} SVG * { position : static font-size : 16px；}._折线{ fill: noneanimate : line向前移动1.5s轻松进出；} @关键帧线条移动{到{笔画-破折号偏移量： 0；}}一、初始化参数

//首先获取传入的参数@ Input()输入参数；//初始化const _ params : ngchartsvgparams={ xaxis 3360 this。输入参数。xaxis，yaxis :输入参数。yaxis，type: this.inputParams.type？this.inputParams.type : 'bar '，width : this。输入参数。宽度？this.inputParams.width : 700，height : this。输入参数。身高？这个。输入参数。身高： 500，数据加：这个。输入参数。数据添加！==未定义？这个。输入参数。数据添加： 8，yscaleno :这个。输入参数。yscaleno=3？this.inputParams.YscaleNo :6 }；这，这。type=_ params。类型；this.params=_ params二：绘制坐标轴Y轴

const _ height=this。参数。身高；const _ pad=这个。参数。填充；const _arrow=_pad '，'(_ pad-5)'(_ pad-6)'，'(_ pad 12)'(_ pad 6)'，'(_ pad 12)；这个AxisY={ x1: _pad，y1: _height - _pad，x2: _pad，y2: _pad，箭头： _ arrow }；三、绘制Y轴的刻度

const _ height=this。参数。身高；const _ width=this。参数。宽度；//显示标签的边距const _ padding=this。参数。填充；const _ Ydata=这个。参数。亚克西斯。数据；//显示的刻度数const _ YscaleNo=this。参数。YscaleNoconst _ dataMax=this。getminandmaxdata(_ Ydata).dataMaxconst _ dataMin=这个。getminandmaxdata(_ Ydata).dataMinlet _ YminValuelet _ yGapValueif(_ dataMin 0){ _ yGapValue=math。ceil((_ dataMax-_ dataMin)/(_ YscaleNo)/10)* 10；_ YminValue=数学。floor(_ dataMin/_ ygap value)* _ ygap value；} else { _ YgapValue=math。ceil((_ dataMax)/(_ YscaleNo)/10)* 10；_ YminValue=0；}//Y轴坐标点const _y2=这个axis . y2 const _ y1=这个AxisY.y1const _ x1=这个AxisY.x1//Y轴刻度的间隙宽度const _ yGapWidth=(_ y1-_ y2)/(这个。参数。yscaleno)；这个。valuetopxratio=_ yGapVaLue/_ yGapWidth；//坐标轴(0,0)的Y轴坐标const _ Y0=_ y1-数学。ABS(_ YminValue/this。valuetopxratio)；这个Y0=_ Y0for(设I=0；我喜欢这个。参数。yscalenoI){ const _ obj : Scale={ x 1: 0，x2: 0，y1: 0，y 2: 0 0，label: ' '，值： 0 0 }；_ obj.x1=_ x1_ obj。y1=_ y1-_ ygappwidth * I；_ obj。x2=_ x1 _ width-2 * _ padding；_ obj。y2=_ y1-_ ygappwidth * I；_ obj。label=_ YminValue _ yGapValue * I；这个yscale。push(_ obj)；}四、绘制X坐标轴

const _ width=this。参数。宽度；//显示标签的边距const _ pad=这个。参数。填充；const _ x2=_ width-_ pad；const _y2=这个y0；const _ arrow=(_ x2-5)'，' _y2 ' ' (_x2 - 10)'，'(_y2 - 6) ' ' (_x2 - 10)'，'(_ y2-6)；这个AxisX={ x1: _pad，y1: _y2，x2: _x2，y2: _y2，箭头： _ arrow }；五、绘制X轴刻度

const _ width=this。参数。宽度；const _ Xdata=this。参数。Xaxis。数据；const _ Ydata=这个。参数。亚克西斯。数据；const Y0=这个y0；const _x1=这个AxisX.x1const _x2=这个axis x . x2 const xGapWidth=(_ x2-_ x1)/(这个。参数。Xaxis。数据。长度1))；这个. XgapWidth=XgapWidthfor(设I=0；I _ Xdata . LengIti){ const _ obj : Scale={ x 1: 0，x2: 0，y1: 0，y2: 0，值： 0 0，标签: ' ' }；_ obj.y1=Y0_ obj。y2=Y0=5；_ obj。label=_ Xdata[I]；_ obj。value=_ Ydata[I]；_ obj。x1=_ x1 xgapwight *(I ^ 1)；_ obj。x2=_ x1 xgapwight *(I ^ 1)；这个xscale。push(_ obj)；六、绘制矩形

const _ value=this。参数。亚克西斯。数据；const _ data add=this。参数。数据添加；const _XgapWidth=this .XgapWidthfor(设I=0；I _ value . lengthi){ const element=_ value[I]；const _obj: Chart={ x: 0，y: 0，w: 0，h: 0，值： 0 }；_ obj。w=_ xGapwidth-2 * _数据添加；_obj.x=这个xscale[I]。x1-_ obj。w-_数据添加；_obj.h=Math.abs(这个Xscale[i].值/这个。valuetopxratio)；_obj.value=这个.Xscale[i].价值；如果（这个Xscale[i].value=0) { _obj.y=this .Y0 -(这个Xscale[i].值)/这个。valuetopxratio} else { _obj.y=this .y0；}这个。数据。push(_ obj)；}}七、绘制折线

const _ data=this.datalet _ 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感兴趣的读者可以查看本网站的主题：《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》和《AngularJS MVC架构总结》

希望本文对AngularJS编程有所帮助。