Angualr2 ChartModle图表
Posted 对雪书空武
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Angualr2 ChartModle图表相关的知识，希望对你有一定的参考价值。
1.ts代码
import { Component, OnInit, OnDestroy } from ‘@angular/core‘;
import { Http, Headers } from ‘@angular/http‘;
import { Observable } from ‘rxjs/Rx‘;
import { AlertService } from ‘ng-jhipster‘;
import { ITEMS_PER_PAGE, Principal } from ‘../shared‘; // 分页设置，权限验证等
import { API_URL } from ‘../app.constants‘;
import { TreeModule, TreeNode } from ‘primeng/primeng‘;
import { WrRvRecQuery } from ‘./wr-RvRecQuery.model‘;
import { UIChart, ChartModule } from ‘primeng/primeng‘;
@Component({
selector: ‘wr-rv-rec-query‘,
styles: [`
p-tree{
float:left;
margin-right:0.5rem;
}
p-datatable{
display:flex;
}
.form-inline button{
margin-left:0.5rem;
}
h2{
margin:0.5rem 0;
}
.data-table-wrap p-tree{
float: left;
height: 50rem;
margin-right: 1rem;
}
:host >>> .ui-tree{
height: 100%;
}
.areaTable{
display: flex;
}
:host >>> .col-button{
text-align:center;
}
:host >>> .col-button button{
margin:0.5rem 0;
}
:host >>> .data-table-search{
display: flex;
margin-top:0.5rem;
margin-bottom:0.5rem;
}
:host >>> .form-group:nth-child(2){
margin:0 1rem;
}
:host >>> .form-inline{
flex:1;
-webkit-box-flex:1;
}
:host >>> .modal-dialog{
margin-top:15%;
}
p-calendar{
display: -webkit-box;
-webkit-box-flex: 1;
}
:host >>> .dialog-datepick{
display: -webkit-box;
-webkit-box-flex: 1;
}
:host >>> .ui-inputtext {
display: -webkit-box;
padding: .5rem .75rem;
font-size: 1rem;
line-height: 1.25;
}
:host >>> .btn-update{
position: absolute;
right: 25px;
top: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
`],
templateUrl: ‘./wr-rvRecQuery.component.html‘
})
export class WrRvRecQueryComponent implements OnInit, OnDestroy {
chartTitle: any;
pieChart: UIChart;
barChart: UIChart;
parentCode: string;
// 河段树选择的节点
selectedNode: TreeNode;
// 查询条件
query: any = {};
queryChar: any = {};
wrRvRecQuerys: WrRvRecQuery[];
wrRvRecQueryChar: WrRvRecQuery[];
itemsPerPage: number = ITEMS_PER_PAGE;
totalRecords: number;
sortBy: string;
page: number;
loading: boolean = true;
loadingChar: boolean = false;
data: any;
barData: any;
pieData: any;
/**
* 巡河统计构造函数
* @param http
* @param alertService
*/
constructor(private http: Http,
private alertService: AlertService) { }
/**
* 页面初期加载
*/
ngOnInit() {
// 示例里面使用荣昌区，实际用的时候应该是根据登录人的所在区域来获取
this.parentCode = ‘500153000000‘;
this.query.addvcdPath = ‘/500153000000‘;
//this.query.l = 3;
//图表
this.defaultChart();
}
showChar(RvRecQuery, pieChart: UIChart, barChart: UIChart) {
this.chartTitle = RvRecQuery.addvnm;
this.pieChart = pieChart;
this.barChart = barChart;
if (RvRecQuery.type == 1) {
this.queryChar.addvcdPath = RvRecQuery.addvcdPath;
this.queryChar.l = RvRecQuery.l + 1;
this.queryChar.type = 1;
}
if (RvRecQuery.type == 2) {
this.queryChar.addvcdPath = RvRecQuery.addvcdPath;
this.queryChar.rvId = RvRecQuery.addvcd;
this.queryChar.l = RvRecQuery.l + 1;
this.queryChar.type = 2;
}
if (RvRecQuery.type == 3) {
this.queryChar.addvcdPath = RvRecQuery.addvcdPath;
this.queryChar.l = RvRecQuery.l + 1;
this.queryChar.type = 3;
}
this.loadDataChar();
//pieData.refresh();
}
/**
* 页面销毁时的操作
*/
ngOnDestroy() {
}
/**
* 河段树的节点选择事件
* @param node 选中的树节点
*/
onNodeSelect(node) {
this.selectedNode = node;
this.query.l = null;
this.query.type = node.type;
if (node.type == 1) {
// 表示选择的是行政区划
this.query.addvcdPath = node.addvcdPath;
}
else if (node.type == 2) {
// 选择的是河流信息
this.query.addvcdPath = node.addvcdPath;
this.query.rvId = node.rvCd;
}
else {
// 选择的是河段信息
this.query.addvcdPath = node.rvSegIdPath;
}
// 设置pageIndex到第一页
this.page = 0;
this.loadData();
}
/**
* 搜索
*/
search() {
// TODO 这里搜索的时候需要组织搜索条件
this.page = 0; // 搜索的时候重置分页
this.loadData();
}
/**
* 表格的自动加载
*/
lazyLoad(e, pieChart: UIChart, barChart: UIChart) {
this.pieChart = pieChart;
this.barChart = barChart;
//this.sortBy = e.sortField ? e.sortField + ‘ ‘ + (e.sortOrder === 1 ? ‘asc‘ : ‘desc‘) : null;
this.page = e.first / e.rows;
console.log(this.page);
// 树节点加载出来以后再进行grid的加载
if (this.selectedNode != null) {
this.loadData();
}
}
/**
* 加载数据
*/
loadData() {
this.loading = true;
let body = this.query || {};
let options = {
headers: new Headers({
pageIndex: this.page,
pageSize: this.itemsPerPage,
//orderBy: this.sortBy
})
};
return this.http.post(`${API_URL}/api/rvCount/page`, body, options)
.subscribe(
(res) => this.onSuccess(res.json(), res.headers),
(res) => this.onError(res.json()));
}
onSuccess(data, headers) {
this.loading = false;
if (+data.responseCode !== 100) {
this.alertService.error(data.messageList[0].key, data.messageList[0].message, null);
return;
}
this.wrRvRecQuerys = data.a0804F0004RespL001List;
this.totalRecords = data.pageControllerInfo.totalRecordCount;
if (data.a0804F0004RespL001List != null && data.a0804F0004RespL001List.length > 0) {
let RvRecQuery: any = data.a0804F0004RespL001List[0];
this.chartTitle = RvRecQuery.addvnm;
if (RvRecQuery.type == 1) {
this.queryChar.addvcdPath = RvRecQuery.addvcdPath;
this.queryChar.l = RvRecQuery.l + 1;
this.queryChar.type = 1;
}
if (RvRecQuery.type == 2) {
this.queryChar.addvcdPath = RvRecQuery.addvcdPath;
this.queryChar.rvId = RvRecQuery.addvcd;
this.queryChar.l = RvRecQuery.l + 1;
this.queryChar.type = 2;
}
if (RvRecQuery.type == 3) {
this.queryChar.addvcdPath = RvRecQuery.addvcdPath;
this.queryChar.l = RvRecQuery.l + 1;
this.queryChar.type = 3;
}
this.loadDataChar();
} else {
this. defaultChart();
if (this.pieChart != null) {
this.pieChart.data = this.pieData;
this.pieChart.reinit();
}
if (this.barChart != null) {
this.barChart.data = this.barData;
this.barChart.reinit();
}
}
}
onError(error) {
this.loading = false;
this.alertService.error(error.error, error.message, null);
}
/**
* 加载图表数据
*/
loadDataChar() {
this.loading = true;
let body = this.queryChar || {};
let options = {
headers: new Headers({
//pageIndex: this.page,
//pageSize: this.itemsPerPage,
//orderBy: this.sortBy
})
};
return this.http.post(`${API_URL}/api/rvCount/page`, body, options)
.subscribe(
(res) => this.onSuccessChar(res.json(), res.headers),
(res) => this.onErrorChar(res.json()));
}
onSuccessChar(data, headers) {
this.loading = false;
if (+data.responseCode !== 100) {
this.alertService.error(data.messageList[0].key, data.messageList[0].message, null);
return;
}
this.wrRvRecQueryChar = data.a0804F0004RespL001List;
let piex: any = [];
let piey: any = [];
for (let i = 0; i < this.wrRvRecQueryChar.length; i++) {
piex.push(this.wrRvRecQueryChar[i].addvnm);
piey.push(this.wrRvRecQueryChar[i].sbCount);
}
this.pieData = {
labels: piex,
datasets: [
{
data: piey,
backgroundColor: [
"#FF6384", "#36A2EB", "#FFCE56", "#6495ED", "#00FFFF",
"#1E90FF", "#00FF7F", "#008080", "#66CDAA", "#008B8B",
"#BDB76B", "#B8860B", "#00CEDE", "#696969", "#20B2AA",
"#CC9999", "#003399", "#993333", "#0099CC", "#EEE8AA",
"#003366", "#FFFFCC", "#FFCCFF", "#99CCFF", "#32CD32",
"#99CC33", "#CCCCFF", "#0000FF", "#191970", "#ADFF2F"
],
hoverBackgroundColor: [
"#FF6384", "#36A2EB", "#FFCE56", "#6495ED", "#00FFFF",
"#1E90FF", "#00FF7F", "#008080", "#66CDAA", "#008B8B",
"#BDB76B", "#B8860B", "#00CEDE", "#696969", "#20B2AA",
"#CC9999", "#003399", "#993333", "#0099CC", "#EEE8AA",
"#003366", "#FFFFCC", "#FFCCFF", "#99CCFF", "#32CD32",
"#99CC33", "#CCCCFF", "#0000FF", "#191970", "#ADFF2F"
]
}]
}
if (this.pieChart != null) {
this.pieChart.data = this.pieData;
this.pieChart.reinit();
}
this.barData = {
labels: piex,
datasets: [
{
label: this.chartTitle,
backgroundColor: ‘#42A5F5‘,
borderColor: ‘#1E88E5‘,
data: piey
}
]
}
if (this.barChart != null) {
this.barChart.data = this.barData;
this.barChart.reinit();
}
this.loadingChar = true;
//this.totalRecords = data.pageControllerInfo.totalRecordCount;
}
onErrorChar(error) {
this.loading = false;
this.alertService.error(error.error, error.message, null);
}
//置空图表
defaultChart(){
this.barData = {
labels: [],
datasets: [
{
label: ‘‘,
backgroundColor: ‘#42A5F5‘,
borderColor: ‘#1E88E5‘,
data: []
}
]
}
this.pieData = {
labels: [],
datasets: [
{
data: [],
backgroundColor: [
"#FF6384",
"#36A2EB",
"#FFCE56"
],
hoverBackgroundColor: [
"#FF6384",
"#36A2EB",
"#FFCE56"
]
}]
}
}
}
2.html 页面
<div>
<h2>
<span>巡河统计</span>
</h2>
<jhi-alert></jhi-alert>
<div class="data-table-wrap">
<rv-seg [parentCode]="parentCode" (onNodeSelect)="onNodeSelect($event)"></rv-seg>
<div class="data-table-loading" *ngIf="loading">
<i class="loading"></i>
</div>
<div class="data-table-search">
<form class="form-inline" (ngSubmit)="search()">
<div class="form-group">
<label>开始时间：</label>从
<p-calendar [styleClass]="‘dialog-datepick‘" inputStyleClass="form-control" name="beginTm" [(ngModel)]="query.beginTm" dateFormat="yy-mm-dd">
</p-calendar>
到
<p-calendar [styleClass]="‘dialog-datepick‘" inputStyleClass="form-control" name="endTm" [(ngModel)]="query.endTm" dateFormat="yy-mm-dd">
</p-calendar>
</div>
<button type="submit" class="btn btn-primary">搜索</button>
</form>
</div>
<p-dataTable #dt [value]="wrRvRecQuerys" [lazy]="true" [rows]="itemsPerPage" [paginator]="true" [totalRecords]="totalRecords"
emptyMessage="没有记录" class="areaTable" (onLazyLoad)="lazyLoad($event,pieChart,barChart)">
<p-column field="addvcd" header="区域" [hidden]="true"></p-column>
<p-column field="l" header="层级" [hidden]="true"></p-column>
<p-column field="type" header="类型" [hidden]="true"></p-column>
<p-column field="addvcdPath" header="区域Path" [hidden]="true"></p-column>
<p-column field="addvnm" header="区域名称"></p-column>
<p-column field="jhCount" header="计划次数" [style]="{‘width‘:‘120px‘}"></p-column>
<p-column field="sjCount" header="实际次数" [style]="{‘width‘:‘120px‘}"></p-column>
<p-column field="sbCount" header="上报次数" [style]="{‘width‘:‘120px‘}"></p-column>
<p-column field="caozuo" header="操作" styleClass="col-button" [style]="{‘width‘:‘300px‘}">
<template let-WrRvRecQuery="rowData" pTemplate="body">
<button type="button" pButton label="查看" (click)="showChar(WrRvRecQuery,pieChart,barChart)"></button>
</template>
</p-column>
</p-dataTable>
<p-chart type="bar" #barChart [data]="barData"></p-chart>
<p-chart type="pie" #pieChart [data]="pieData"></p-chart>
</div>
</div>
以上是关于Angualr2 ChartModle图表的主要内容，如果未能解决你的问题，请参考以下文章