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>

时间： 2024-10-07 04:30:26

Angualr2 ChartModle图表的相关文章

linux下birt 图表中文乱码问题

birtChart 在linux下中文乱码的问题是Java虚拟机找不到中文字库字体文件造成的. 步骤: 1.把.bash_profile中的export LANG=zh_CN.GB2312修改为: export LANG=zh_CN.GB18030.因为gb2312不支持一些特殊的汉字. 2.在在生成的chart图表的XML Source里修改字体:把SansSerif修改为SimSun. 3.找到一个能在linux下使用的中文字体,可以是Windows 7下的c:\windows\fonts\

13.5.2 用 Excel 的图表显示数据

创建图表,需要指定很多属性:好在 Excel 编程接口提供了 ChartWizard 方法,使问题简单化.这个方法把图表所有重要特性变成可选参数,这样,就可以只指定需要的部分.F# 语言支持可选参数,因此,创建图表的代码非常简单,如清单 13.20. 清单13.20 生成 Excel 图表 (F#) let chartobjects = (worksheet.ChartObjects() :?> ChartObjects) let chartobject = chartobjects.Add(4

JAVA平台开放图表绘制类库——JFreeChart

好的东西要分享要推荐,这里向大家推荐一个java平台下的一个开源图表绘制类库JFreeChart,相关资源(源代码.demo源码.开发指南)已经上传至CSDN资源,需要的可以自行下载. JFreeChart的图表绘制功能非常强大,涵盖了几乎所有想的到的图表,并且绘制效果还很炫酷.来看下JFreeChart的主要效果图: 之前都是用excel绘制的图表,还要调整很多属性之类的东西,觉得很麻烦,所以就全部模块化实现了,代码就不贴出来了. JFreeChart相关资源下载地址:http://downl

大数据时代的图表可视化利器——highcharts,D3和百度的echarts

还记得阿里巴巴那个令人澎湃激情的双十一吗?还记得淘宝生动形象地把你的的消费历程一一地展示给你看吗?还记得那些酷炫拽的it报告图表吗?在这个大数据越来越盛行的年代,怎样去表达一些用户的关系,人物的关联,甚至是事情的发展,都让我们有更多的表达方式.其中最简单直接,形象明了的就是用图表说明问题了. 如果在以前,要实现各种图表,可能很多人会选择flash.但是flash成本较高,图表多的时候很耗性能.后来越来越多的纯js框架出现,让大家有了更多的选择.所以接下来我想推荐几个不错的图表js框架给大家用.

iOS:使用贝塞尔曲线绘制图表（折线图、柱状图、饼状图）

1.介绍: UIBezierPath :画贝塞尔曲线的path类 UIBezierPath定义 : 贝赛尔曲线的每一个顶点都有两个控制点,用于控制在该顶点两侧的曲线的弧度. 曲线的定义有四个点:起始点.终止点(也称锚点)以及两个相互分离的中间点. 滑动两个中间点,贝塞尔曲线的形状会发生变化. UIBezierPath :对象是CGPathRef数据类型的封装,可以方便的让我们画出 矩形 . 椭圆 或者 直线和曲线的组合形状 初始化方法: + (instancetype)bezierPath; /

使用百度echarts画图表的步骤

1.百度echarts是一个很好用的图表工具,可以将一些数据很形象直观的展示出来,下面看一下简单的使用. 2.首先引用echarts.js 具体文档可以参考官网: http://echarts.baidu.com/tutorial.html 里面讲的很详细.而且官网也有很多的实例供我们参考. 3.引入echarts之后需要一个容器: 1)准备容器 这个容器就是将我们的数据在里面展示出来. 2)初始化echarts实例: var myCharts =  echarts.init(document.

visifire 图表双坐标轴 silverlight

public void CreateChart(Grid oGrid, ObservableCollection<ListItem> lBaseOilBar)        {            foreach (ListItem li in lBaseOilBar)            {                //图表大小,框线                Chart chart = new MyCharts();                chart.Width =

扩增子图表解读1箱线图：Alpha多样性

箱线图 箱形图(Box-plot)又称为盒须图.盒式图或箱线图,是一种用作显示一组数据分散情况资料的统计图.因形状如箱子而得名.在宏基因组领域,常用于展示样品组中各样品Alpha多样性的分布 第一种情况,最大或最小值没有超过1.5倍箱体范围 第二种情况,最大或最小值超过1.5倍箱体范围,外位延长线外,即异常值(outliers) Alpha多样性 知识背景:Alpha多样性计算方法 常见的丰度估计方法有Shannon, Chao1和Observed OTU和PD whole tree等.我最喜欢

自动化邮件报告平台-邮件发送highchart图表

前段时间参与开发这样的一个系统,负责前端设计开发,使用人员提出需要在邮件发送的时候自动获取这些highchart图表数据,并显示在平台页面上,当发送邮件的时候也把图表附带在邮件中. highchart是一个比较强大的图表组件,这个图表组件以svg方式渲染在网页上,渲染完毕后会在网页中添加了svg元素,可以通过dom 或者jQuery 把svg内容单独抽取出来,此svg元素也能够在网页上直接显示,如下图所示.  但是,在邮箱环境下,这些svg元素不一定能展示在邮件里面,各种邮箱环境不同,在手机端邮