Angular2使用使用SVG自定义图表（条形图、折线图）组件示例自定义图表（条形图、折线图）组件示例
本文实例讲述了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 //条形图之间的距离
};
效果：
源代码：
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'],
资源评论
