Ohos-MPChart组件功能描述
刘政宏
润和软件高级开发工程师
简介
ohos-mpchart是openatom openharmony（简称“openharmony”）系统显示各种图表视图的三方组件，用于声明式应用开发，提供了多种多样的图表视图，包括折线图、曲线图、柱形图、饼状图、k线图、雷达图、气泡图。适用于各种统计后的数据以视觉直观的方式呈现。
使用场景
ohos-mpchart为广大openharmony应用开发者在处理数据时，使数据显示更加直观。尤其现在的大数据时代面对愈加庞大的数据只需要导入ohos-mpchart三方组件，然后调用相关的接口就能实现各种各样的图表以方便数据汇总。
效果展示
组件功能描述
ohos-mpchart是一个强大的图表视图，主要提供多种多样的图表视图，包括折线图、曲线图、柱形图、饼状图、k线图等等，具体功能模块如下：
开发环境
安装ide：支持deveco studio 3.0 release(build version 3.0.0.993)版本。安装sdk：支持openharmony api version 8 及以上版本
使用方法
图表一：折线图
1.下载ohos-mpchart组件并导入linechart自定义组件：
//下载mpchart组件 npm install @ohos/mpchart --saveimport { linechart } from '@ohos/ohos_mpchart' openharmony npm环境配置等更多内容，请参考安装教程
如何安装openharmony npm包
https://gitee.com/openharmony-tpc/docs/blob/master/openharmony_npm_usage.md
2.初始化数据
abouttoappear() { this.linedata = this.initcurvedata(45, 100); this.topaxis.setlabelcount(5, false); this.topaxis.setposition(xaxisposition.top); this.topaxis.setaxisminimum(0); this.topaxis.setaxismaximum(50); this.bottomaxis.setlabelcount(5, false);this.bottomaxis.setposition(xaxisposition.bottom); this.bottomaxis.setaxisminimum(0); this.bottomaxis.setaxismaximum(50); this.bottomaxis.setdrawaxisline(false); this.bottomaxis.setdrawlabels(false) this.leftaxis = new yaxis(axisdependency.left); this.leftaxis.setlabelcount(7, false); this.leftaxis.setposition(yaxislabelposition.outside_chart); this.leftaxis.setspacetop(15); this.leftaxis.setaxisminimum(-50); this.leftaxis.setaxismaximum(200); this.leftaxis.enablegriddashedline(5,5,0) this.rightaxis = new yaxis(axisdependency.right); this.rightaxis.setdrawgridlines(false); this.rightaxis.setlabelcount(7, false); this.rightaxis.setspacetop(11); this.rightaxis.setaxisminimum(-50); // this replaces setstartatzero(true) this.rightaxis.setaxismaximum(200); this.rightaxis.setdrawaxisline(false); var upperlimtline:limitline= new limitline(150, upper limit); upperlimtline.setlinewidth(4); upperlimtline.enabledashedline(10, 10, 0); upperlimtline.setlabelposition(limitlabelposition.right_top); upperlimtline.settextsize(10); var lowerlimtline:limitline= new limitline(-30, lower limit); lowerlimtline.setlinewidth(4); lowerlimtline.enabledashedline(5, 5, 0); lowerlimtline.setlabelposition(limitlabelposition.right_bottom); lowerlimtline.settextsize(10); this.leftaxis.setdrawlimitlinesbehinddata(true); this.leftaxis.addlimitline(upperlimtline); this.leftaxis.addlimitline(lowerlimtline); } private initcurvedata(count: number, range: number): linedata { let values = new jarraylist(); for (let i = 0; i < 50; i++) { let val: number = math.random() * 180 - 30; values.add(new entryohos(i, val)); } let gradientfillcolor = new array(); gradientfillcolor.push(['#ffff0000', 0.1]) gradientfillcolor.push(['#00ff0000', 1.0]) let dataset = new jarraylist(); let set1 = new linedataset(values, dataset 1); set1.setdrawfilled(true); set1.enabledashedline(10,5,0) set1.setmode(mode.linear); set1.setgradientfillcolor(gradientfillcolor) set1.setcolorbycolor(color.black); set1.setlinewidth(1) set1.setdrawcircles(true); set1.setcirclecolor(color.black); set1.setcircleradius(2); set1.setcircleholeradius(1) set1.setcircleholecolor(color.green) set1.setdrawcirclehole(false) dataset.add(set1); return new linedata(dataset) } 3.添加数据到自定义曲线图表组件
build() { stack({ aligncontent: alignment.topstart }) { linechart({ topaxis: this.topaxis, bottomaxis: this.bottomaxis, width: this.width, height: this.height, minoffset: this.minoffset, leftaxis: this.leftaxis, rightaxis: this.rightaxis, linedata: this.linedata, }) } }
图表二：柱状图
1.导入barchart自定义组件：
import{barchart,barchartmodel} from '@ohos/ohos_mpchart' 2.初始化数据
@state model:barchartmodel = new barchartmodel(); width: number = 350; //表的宽度 height: number = 500; //表的高度 minoffset: number = 15; //x轴线偏移量 leftaxis: yaxis = null; rightaxis: yaxis = null; bottomaxis: xaxis = new xaxis(); private abouttoappear(){ this.leftaxis = new yaxis(axisdependency.left); this.leftaxis.setlabelcount(6, false); this.leftaxis.setposition(yaxislabelposition.outside_chart); this.leftaxis.setspacetop(15); this.leftaxis.setaxisminimum(0); this.leftaxis.setaxismaximum(110); this.leftaxis.enablegriddashedline(10,10,0) this.rightaxis = new yaxis(axisdependency.right); this.rightaxis.setdrawgridlines(false); this.rightaxis.setlabelcount(6, false); this.rightaxis.setspacetop(11); this.rightaxis.setaxisminimum(0); this.rightaxis.setaxismaximum(110); this.bottomaxis.setlabelcount(5, false); this.bottomaxis.setposition(xaxisposition.bottom); this.bottomaxis.setaxisminimum(0); this.bottomaxis.setaxismaximum(10); this.setdata(this.bottomaxis.getaxismaximum(),this.leftaxis.getaxismaximum()) this.model.width = this.width; this.model.height = this.height; this.model.init(); this.model.setdrawbarshadow(false); this.model.setdrawvalueabovebar(true); this.model.getdescription().setenabled(false); this.model.setmaxvisiblevaluecount(60); this.model.setleftyaxis(this.leftaxis); this.model.setrightyaxis(this.rightaxis); this.model.setxaxis(this.bottomaxis) this.model.mrenderer.initbuffers(); this.model.preparematrixvaluepx(); } private setdata(count: number, range: number) { let groupspace: number = 0.08; let barspace: number = 0.03; // x4 dataset let barwidth: number = 0.2; // x4 dataset let groupcount: number = count + 1; let startyear: number = 1980; let endyear: number = startyear + groupcount; let values1:jarraylist = new jarraylist(); let values2:jarraylist = new jarraylist(); let values3:jarraylist = new jarraylist(); let values4:jarraylist = new jarraylist(); let randommultiplier: number = range; for (let i = startyear; i 0) { set1 = this.model.getbardata().getdatasetbyindex(0) as bardataset; set2 = this.model.getbardata().getdatasetbyindex(1) as bardataset; set3 = this.model.getbardata().getdatasetbyindex(2) as bardataset; set4 = this.model.getbardata().getdatasetbyindex(3) as bardataset; set1.setvalues(values1); set2.setvalues(values2); set3.setvalues(values3); set4.setvalues(values4); this.model.getbardata().notifydatachanged(); this.model.notifydatasetchanged(); } else { let colors: number[] = [color.rgb(104, 241, 175),color.rgb(164, 228, 251),color.rgb(242, 247, 158),color.rgb(255, 102, 0)]; set1 = new bardataset(values1, company a); set1.setcolorsbyarr(colors); set2 = new bardataset(values2, company b); set2.setcolorsbyarr(colors); set3 = new bardataset(values3, company c); set3.setcolorsbyarr(colors); set4 = new bardataset(values2, company d); set4.setcolorsbyarr(colors); let datasets: jarraylist = new jarraylist(); datasets.add(set1); datasets.add(set2); datasets.add(set3); datasets.add(set4); let data: bardata = new bardata(datasets); this.model.setdata(data); } this.model.getbardata().setbarwidth(barwidth); this.bottomaxis.setaxisminimum(startyear); this.bottomaxis.setaxismaximum(startyear + this.model.getbardata().getgroupwidth(groupspace, barspace) * groupcount); this.model.groupbars(startyear, groupspace, barspace); } 3.添加数据到自定义曲线图表组件
build() { stack(){ barchart({model:this.model}) } }
图表三：饼状图
1.导入piechart自定义组件：
import { piechart } from '@ohos/ohos_mpchart' 2.初始化数据
piedata: piedata = null; @state piemodel: piechart.model = new piechart.model() @state @watch(seekbarxvaluewatch) seekbarx: seekbar.model = new seekbar.model() @state @watch(seekbaryvaluewatch) seekbary: seekbar.model = new seekbar.model() parties: string[] = [ party a, party b, party c, party d, party e, party f, party g, party h, party i, party j, party k, party l, party m, party n, party o, party p, party q, party r, party s, party t, party u, party v, party w, party x, party y, party z] private abouttoappear(): void { this.piedata = this.initpiedata(4, 10); this.piemodel .setpiedata(this.piedata) .setradius(150) .setholeradius(0.5) .setoffset(new mppointf(160,200)) // vp } private initpiedata(count: number, range: number): piedata{ let entries = new jarraylist(); for (var i = 0; i < count; i++) { entries.add(new pieentry(((math.random() * range) + range / 5), this.parties[i % this.parties.length])) } // entries.add(new pieentry(4,'party a')) // entries.add(new pieentry(2,'party b')) // entries.add(new pieentry(5,'party c')) // entries.add(new pieentry(3,'party d')) let dataset: piedataset = new piedataset(entries, election results); dataset.setdrawicons(false); dataset.setslicespace(3); dataset.seticonsoffset(new mppointf(0, 40)); dataset.setselectionshift(5); // add a lot of colors let colors: jarraylist = new jarraylist(); for (let index = 0; index < colortemplate.vordiplom_colors.length; index++) { colors.add(colortemplate.vordiplom_colors[index]); } for (let index = 0; index < colortemplate.joyful_colors.length; index++) { colors.add(colortemplate.joyful_colors[index]); } for (let index = 0; index < colortemplate.colorful_colors.length; index++) { colors.add(colortemplate.colorful_colors[index]); } for (let index = 0; index < colortemplate.liberty_colors.length; index++) { colors.add(colortemplate.liberty_colors[index]); } for (let index = 0; index < colortemplate.pastel_colors.length; index++) { colors.add(colortemplate.pastel_colors[index]); } colors.add(colortemplate.getholoblue()); dataset.setcolorsbylist(colors); return new piedata(dataset) } 3.添加数据到自定义曲线图表组件
build() { column() { piechart({ model: this.piemodel }) }
图表四：雷达图
1.导入radarchart自定义组件：
import { radarchart } from '@ohos/ohos_mpchart'; 2.初始化数据
width: number = 300; //表的宽度 height: number = 300 //表的高度 minoffset: number = 5; //x轴线偏移量 xaxis: xaxis = new xaxis(); //顶部x轴 yaxis: yaxis = new yaxis(); data:radardata= new radardata(); @state radarchartmode:radarchartmode=new radarchartmode();public abouttoappear() { this.model.menuitemarr = this.menuitemarr this.model.title = this.title this.data=this.initradardata( 5,50) this.xaxis.settextsize(9); this.xaxis.setyoffset(0); this.xaxis.setxoffset(0); this.xaxis.settextcolor(color.white); const mactivities:string[] = [burger, steak, salad, pasta, pizza]; this.xaxis.setvalueformatter(new class radaraxisvalueformatter implements iaxisvalueformatter{ public getformattedvalue( value:number, axisstring { return mactivities[value % mactivities.length]; } }); this.xaxis.longest=mactivities[0]; this.yaxis.setlabelcount(5, false); this.yaxis.settextsize(9); this.yaxis.setaxisminimum(0); this.yaxis.setaxismaximum(80); this.yaxis.setdrawlabels(false); this.radarchartmode.mrotateenabled=false this.radarchartmode.setyextraoffset(this.model.height) this.radarchartmode.setxaxis(this.xaxis) this.radarchartmode.setyaxis(this.yaxis) this.radarchartmode.setwidth(this.width) this.radarchartmode.setheight(this.height) this.radarchartmode.setminoffset(this.minoffset) this.radarchartmode.setdata(this.data) this.radarchartmode.setpaddingleft(30) this.radarchartmode.setpaddingtop(100) this.radarchartmode.init(); //this.animate('animate xy') } private initradardata(count: number, range: number): radardata { let mul:number = 80; let min:number = 20; let cnt:number = 5; let entries1 = new jarraylist (); let entries2 = new jarraylist (); // note: the order of the entries when being added to the entries array determines their position around the center of // the chart. for (let i = 0; i < cnt; i++) { let val1:number = math.random() * mul + min; entries1.add(new radarentry(val1)); let val2:number = math.random() * mul + min; entries2.add(new radarentry(val2)); } let set1:radardataset = new radardataset(entries1, last week); set1.setcolorbycolor(0xb4676e81); set1.setfillcolor(0xb4676e81); set1.setdrawfilled(true); set1.setfillalpha(180); set1.setlinewidth(2); set1.setdrawhighlightcircleenabled(true); set1.setdrawhighlightindicators(false); set1.sethighlightcirclestrokecolor(0xffffffff); set1.sethighlightcirclefillcolor(0xb4676e81) set1.setdrawvalues(true) set1.seticonsoffset(new mppointf(0, px2vp(0))); let set2:radardataset = new radardataset(entries2, this week); set2.setcolorbycolor(0xb479a2af); set2.setfillcolor(0xb479a2af); set2.setdrawfilled(true); set2.setfillalpha(180); set2.setlinewidth(2); set2.setdrawhighlightcircleenabled(true); set2.setdrawhighlightindicators(false); set2.sethighlightcirclestrokecolor(0xffffffff); set2.sethighlightcirclefillcolor(0xb479a2af) set2.setdrawvalues(true) set2.seticonsoffset(new mppointf(0, px2vp(0))); let sets = new jarraylist(); sets.add(set1); sets.add(set2); // let data:radardata = new radardata(sets); data.setvaluetextsize(8); data.setdrawvalues(this.isdrawvaluesenable); data.setvaluetextcolor(color.white); return data } public getformattedvalue(value: number): string { var str = string(value.tofixed(1)).split(.); if(str[1] == 0){ return str[0]; }else{ return string(value.tofixed(1)) } } 3.添加数据到自定义曲线图表组件
build() { column() { stack({ aligncontent: alignment.topstart }) { radarchart({ radarchartmode:this.radarchartmode, }) } } }
其他图表使用方式与以上图表使用方法基本一致
数字科技是世界互联网大会的重要板块之一
英特尔：从手握方向盘到丢掉方向盘 安全始终为先
创盈芯TK11\-A0__容纳了我想象中的所有东西
腾讯云和华为云的ingress路径匹配规则把我绕晕了
启玄科技完成数千万Pre-B融资
Ohos-MPChart组件功能描述
便携式气体检测仪一般都应用在哪些领域之中
比科奇为其5G New Radio小基站SoC选用UltraSoC的系统驻留分析和监测IP
什么产品需要做emc认证_EMC认证多少钱
雅虎日本正计划利用BitARG技术推出自己的加密货币交易平台
高集成度、低功耗CMMB解决方案及典型应用
多媒体视讯技术发展历程
关于电源布局布线
苹果也撒狗粮：iOS11新图标脱单了
感谢哈尔滨工业大学对我司HS-225B恒温恒湿试验箱的认可
APS自动排产-AP工厂高级计划
9个比较常用的cmd命令分享
谷歌调用Android TV许可协议棒杀亚马逊
如何通过多模态对比学习增强句子特征学习
华为Mate X2将于2月26日再次开售
润和软件高级开发工程师
简介
ohos-mpchart是openatom openharmony（简称“openharmony”）系统显示各种图表视图的三方组件，用于声明式应用开发，提供了多种多样的图表视图，包括折线图、曲线图、柱形图、饼状图、k线图、雷达图、气泡图。适用于各种统计后的数据以视觉直观的方式呈现。
使用场景
ohos-mpchart为广大openharmony应用开发者在处理数据时，使数据显示更加直观。尤其现在的大数据时代面对愈加庞大的数据只需要导入ohos-mpchart三方组件，然后调用相关的接口就能实现各种各样的图表以方便数据汇总。
效果展示
组件功能描述
ohos-mpchart是一个强大的图表视图，主要提供多种多样的图表视图，包括折线图、曲线图、柱形图、饼状图、k线图等等，具体功能模块如下：
开发环境
安装ide：支持deveco studio 3.0 release(build version 3.0.0.993)版本。安装sdk：支持openharmony api version 8 及以上版本
使用方法
图表一：折线图
1.下载ohos-mpchart组件并导入linechart自定义组件：
//下载mpchart组件 npm install @ohos/mpchart --saveimport { linechart } from '@ohos/ohos_mpchart' openharmony npm环境配置等更多内容，请参考安装教程
如何安装openharmony npm包
https://gitee.com/openharmony-tpc/docs/blob/master/openharmony_npm_usage.md
2.初始化数据
abouttoappear() { this.linedata = this.initcurvedata(45, 100); this.topaxis.setlabelcount(5, false); this.topaxis.setposition(xaxisposition.top); this.topaxis.setaxisminimum(0); this.topaxis.setaxismaximum(50); this.bottomaxis.setlabelcount(5, false);this.bottomaxis.setposition(xaxisposition.bottom); this.bottomaxis.setaxisminimum(0); this.bottomaxis.setaxismaximum(50); this.bottomaxis.setdrawaxisline(false); this.bottomaxis.setdrawlabels(false) this.leftaxis = new yaxis(axisdependency.left); this.leftaxis.setlabelcount(7, false); this.leftaxis.setposition(yaxislabelposition.outside_chart); this.leftaxis.setspacetop(15); this.leftaxis.setaxisminimum(-50); this.leftaxis.setaxismaximum(200); this.leftaxis.enablegriddashedline(5,5,0) this.rightaxis = new yaxis(axisdependency.right); this.rightaxis.setdrawgridlines(false); this.rightaxis.setlabelcount(7, false); this.rightaxis.setspacetop(11); this.rightaxis.setaxisminimum(-50); // this replaces setstartatzero(true) this.rightaxis.setaxismaximum(200); this.rightaxis.setdrawaxisline(false); var upperlimtline:limitline= new limitline(150, upper limit); upperlimtline.setlinewidth(4); upperlimtline.enabledashedline(10, 10, 0); upperlimtline.setlabelposition(limitlabelposition.right_top); upperlimtline.settextsize(10); var lowerlimtline:limitline= new limitline(-30, lower limit); lowerlimtline.setlinewidth(4); lowerlimtline.enabledashedline(5, 5, 0); lowerlimtline.setlabelposition(limitlabelposition.right_bottom); lowerlimtline.settextsize(10); this.leftaxis.setdrawlimitlinesbehinddata(true); this.leftaxis.addlimitline(upperlimtline); this.leftaxis.addlimitline(lowerlimtline); } private initcurvedata(count: number, range: number): linedata { let values = new jarraylist(); for (let i = 0; i < 50; i++) { let val: number = math.random() * 180 - 30; values.add(new entryohos(i, val)); } let gradientfillcolor = new array(); gradientfillcolor.push(['#ffff0000', 0.1]) gradientfillcolor.push(['#00ff0000', 1.0]) let dataset = new jarraylist(); let set1 = new linedataset(values, dataset 1); set1.setdrawfilled(true); set1.enabledashedline(10,5,0) set1.setmode(mode.linear); set1.setgradientfillcolor(gradientfillcolor) set1.setcolorbycolor(color.black); set1.setlinewidth(1) set1.setdrawcircles(true); set1.setcirclecolor(color.black); set1.setcircleradius(2); set1.setcircleholeradius(1) set1.setcircleholecolor(color.green) set1.setdrawcirclehole(false) dataset.add(set1); return new linedata(dataset) } 3.添加数据到自定义曲线图表组件
build() { stack({ aligncontent: alignment.topstart }) { linechart({ topaxis: this.topaxis, bottomaxis: this.bottomaxis, width: this.width, height: this.height, minoffset: this.minoffset, leftaxis: this.leftaxis, rightaxis: this.rightaxis, linedata: this.linedata, }) } }
图表二：柱状图
1.导入barchart自定义组件：
import{barchart,barchartmodel} from '@ohos/ohos_mpchart' 2.初始化数据
@state model:barchartmodel = new barchartmodel(); width: number = 350; //表的宽度 height: number = 500; //表的高度 minoffset: number = 15; //x轴线偏移量 leftaxis: yaxis = null; rightaxis: yaxis = null; bottomaxis: xaxis = new xaxis(); private abouttoappear(){ this.leftaxis = new yaxis(axisdependency.left); this.leftaxis.setlabelcount(6, false); this.leftaxis.setposition(yaxislabelposition.outside_chart); this.leftaxis.setspacetop(15); this.leftaxis.setaxisminimum(0); this.leftaxis.setaxismaximum(110); this.leftaxis.enablegriddashedline(10,10,0) this.rightaxis = new yaxis(axisdependency.right); this.rightaxis.setdrawgridlines(false); this.rightaxis.setlabelcount(6, false); this.rightaxis.setspacetop(11); this.rightaxis.setaxisminimum(0); this.rightaxis.setaxismaximum(110); this.bottomaxis.setlabelcount(5, false); this.bottomaxis.setposition(xaxisposition.bottom); this.bottomaxis.setaxisminimum(0); this.bottomaxis.setaxismaximum(10); this.setdata(this.bottomaxis.getaxismaximum(),this.leftaxis.getaxismaximum()) this.model.width = this.width; this.model.height = this.height; this.model.init(); this.model.setdrawbarshadow(false); this.model.setdrawvalueabovebar(true); this.model.getdescription().setenabled(false); this.model.setmaxvisiblevaluecount(60); this.model.setleftyaxis(this.leftaxis); this.model.setrightyaxis(this.rightaxis); this.model.setxaxis(this.bottomaxis) this.model.mrenderer.initbuffers(); this.model.preparematrixvaluepx(); } private setdata(count: number, range: number) { let groupspace: number = 0.08; let barspace: number = 0.03; // x4 dataset let barwidth: number = 0.2; // x4 dataset let groupcount: number = count + 1; let startyear: number = 1980; let endyear: number = startyear + groupcount; let values1:jarraylist = new jarraylist(); let values2:jarraylist = new jarraylist(); let values3:jarraylist = new jarraylist(); let values4:jarraylist = new jarraylist(); let randommultiplier: number = range; for (let i = startyear; i 0) { set1 = this.model.getbardata().getdatasetbyindex(0) as bardataset; set2 = this.model.getbardata().getdatasetbyindex(1) as bardataset; set3 = this.model.getbardata().getdatasetbyindex(2) as bardataset; set4 = this.model.getbardata().getdatasetbyindex(3) as bardataset; set1.setvalues(values1); set2.setvalues(values2); set3.setvalues(values3); set4.setvalues(values4); this.model.getbardata().notifydatachanged(); this.model.notifydatasetchanged(); } else { let colors: number[] = [color.rgb(104, 241, 175),color.rgb(164, 228, 251),color.rgb(242, 247, 158),color.rgb(255, 102, 0)]; set1 = new bardataset(values1, company a); set1.setcolorsbyarr(colors); set2 = new bardataset(values2, company b); set2.setcolorsbyarr(colors); set3 = new bardataset(values3, company c); set3.setcolorsbyarr(colors); set4 = new bardataset(values2, company d); set4.setcolorsbyarr(colors); let datasets: jarraylist = new jarraylist(); datasets.add(set1); datasets.add(set2); datasets.add(set3); datasets.add(set4); let data: bardata = new bardata(datasets); this.model.setdata(data); } this.model.getbardata().setbarwidth(barwidth); this.bottomaxis.setaxisminimum(startyear); this.bottomaxis.setaxismaximum(startyear + this.model.getbardata().getgroupwidth(groupspace, barspace) * groupcount); this.model.groupbars(startyear, groupspace, barspace); } 3.添加数据到自定义曲线图表组件
build() { stack(){ barchart({model:this.model}) } }
图表三：饼状图
1.导入piechart自定义组件：
import { piechart } from '@ohos/ohos_mpchart' 2.初始化数据
piedata: piedata = null; @state piemodel: piechart.model = new piechart.model() @state @watch(seekbarxvaluewatch) seekbarx: seekbar.model = new seekbar.model() @state @watch(seekbaryvaluewatch) seekbary: seekbar.model = new seekbar.model() parties: string[] = [ party a, party b, party c, party d, party e, party f, party g, party h, party i, party j, party k, party l, party m, party n, party o, party p, party q, party r, party s, party t, party u, party v, party w, party x, party y, party z] private abouttoappear(): void { this.piedata = this.initpiedata(4, 10); this.piemodel .setpiedata(this.piedata) .setradius(150) .setholeradius(0.5) .setoffset(new mppointf(160,200)) // vp } private initpiedata(count: number, range: number): piedata{ let entries = new jarraylist(); for (var i = 0; i < count; i++) { entries.add(new pieentry(((math.random() * range) + range / 5), this.parties[i % this.parties.length])) } // entries.add(new pieentry(4,'party a')) // entries.add(new pieentry(2,'party b')) // entries.add(new pieentry(5,'party c')) // entries.add(new pieentry(3,'party d')) let dataset: piedataset = new piedataset(entries, election results); dataset.setdrawicons(false); dataset.setslicespace(3); dataset.seticonsoffset(new mppointf(0, 40)); dataset.setselectionshift(5); // add a lot of colors let colors: jarraylist = new jarraylist(); for (let index = 0; index < colortemplate.vordiplom_colors.length; index++) { colors.add(colortemplate.vordiplom_colors[index]); } for (let index = 0; index < colortemplate.joyful_colors.length; index++) { colors.add(colortemplate.joyful_colors[index]); } for (let index = 0; index < colortemplate.colorful_colors.length; index++) { colors.add(colortemplate.colorful_colors[index]); } for (let index = 0; index < colortemplate.liberty_colors.length; index++) { colors.add(colortemplate.liberty_colors[index]); } for (let index = 0; index < colortemplate.pastel_colors.length; index++) { colors.add(colortemplate.pastel_colors[index]); } colors.add(colortemplate.getholoblue()); dataset.setcolorsbylist(colors); return new piedata(dataset) } 3.添加数据到自定义曲线图表组件
build() { column() { piechart({ model: this.piemodel }) }
图表四：雷达图
1.导入radarchart自定义组件：
import { radarchart } from '@ohos/ohos_mpchart'; 2.初始化数据
width: number = 300; //表的宽度 height: number = 300 //表的高度 minoffset: number = 5; //x轴线偏移量 xaxis: xaxis = new xaxis(); //顶部x轴 yaxis: yaxis = new yaxis(); data:radardata= new radardata(); @state radarchartmode:radarchartmode=new radarchartmode();public abouttoappear() { this.model.menuitemarr = this.menuitemarr this.model.title = this.title this.data=this.initradardata( 5,50) this.xaxis.settextsize(9); this.xaxis.setyoffset(0); this.xaxis.setxoffset(0); this.xaxis.settextcolor(color.white); const mactivities:string[] = [burger, steak, salad, pasta, pizza]; this.xaxis.setvalueformatter(new class radaraxisvalueformatter implements iaxisvalueformatter{ public getformattedvalue( value:number, axisstring { return mactivities[value % mactivities.length]; } }); this.xaxis.longest=mactivities[0]; this.yaxis.setlabelcount(5, false); this.yaxis.settextsize(9); this.yaxis.setaxisminimum(0); this.yaxis.setaxismaximum(80); this.yaxis.setdrawlabels(false); this.radarchartmode.mrotateenabled=false this.radarchartmode.setyextraoffset(this.model.height) this.radarchartmode.setxaxis(this.xaxis) this.radarchartmode.setyaxis(this.yaxis) this.radarchartmode.setwidth(this.width) this.radarchartmode.setheight(this.height) this.radarchartmode.setminoffset(this.minoffset) this.radarchartmode.setdata(this.data) this.radarchartmode.setpaddingleft(30) this.radarchartmode.setpaddingtop(100) this.radarchartmode.init(); //this.animate('animate xy') } private initradardata(count: number, range: number): radardata { let mul:number = 80; let min:number = 20; let cnt:number = 5; let entries1 = new jarraylist (); let entries2 = new jarraylist (); // note: the order of the entries when being added to the entries array determines their position around the center of // the chart. for (let i = 0; i < cnt; i++) { let val1:number = math.random() * mul + min; entries1.add(new radarentry(val1)); let val2:number = math.random() * mul + min; entries2.add(new radarentry(val2)); } let set1:radardataset = new radardataset(entries1, last week); set1.setcolorbycolor(0xb4676e81); set1.setfillcolor(0xb4676e81); set1.setdrawfilled(true); set1.setfillalpha(180); set1.setlinewidth(2); set1.setdrawhighlightcircleenabled(true); set1.setdrawhighlightindicators(false); set1.sethighlightcirclestrokecolor(0xffffffff); set1.sethighlightcirclefillcolor(0xb4676e81) set1.setdrawvalues(true) set1.seticonsoffset(new mppointf(0, px2vp(0))); let set2:radardataset = new radardataset(entries2, this week); set2.setcolorbycolor(0xb479a2af); set2.setfillcolor(0xb479a2af); set2.setdrawfilled(true); set2.setfillalpha(180); set2.setlinewidth(2); set2.setdrawhighlightcircleenabled(true); set2.setdrawhighlightindicators(false); set2.sethighlightcirclestrokecolor(0xffffffff); set2.sethighlightcirclefillcolor(0xb479a2af) set2.setdrawvalues(true) set2.seticonsoffset(new mppointf(0, px2vp(0))); let sets = new jarraylist(); sets.add(set1); sets.add(set2); // let data:radardata = new radardata(sets); data.setvaluetextsize(8); data.setdrawvalues(this.isdrawvaluesenable); data.setvaluetextcolor(color.white); return data } public getformattedvalue(value: number): string { var str = string(value.tofixed(1)).split(.); if(str[1] == 0){ return str[0]; }else{ return string(value.tofixed(1)) } } 3.添加数据到自定义曲线图表组件
build() { column() { stack({ aligncontent: alignment.topstart }) { radarchart({ radarchartmode:this.radarchartmode, }) } } }
其他图表使用方式与以上图表使用方法基本一致
数字科技是世界互联网大会的重要板块之一
英特尔：从手握方向盘到丢掉方向盘 安全始终为先
创盈芯TK11\-A0__容纳了我想象中的所有东西
腾讯云和华为云的ingress路径匹配规则把我绕晕了
启玄科技完成数千万Pre-B融资
Ohos-MPChart组件功能描述
便携式气体检测仪一般都应用在哪些领域之中
比科奇为其5G New Radio小基站SoC选用UltraSoC的系统驻留分析和监测IP
什么产品需要做emc认证_EMC认证多少钱
雅虎日本正计划利用BitARG技术推出自己的加密货币交易平台
高集成度、低功耗CMMB解决方案及典型应用
多媒体视讯技术发展历程
关于电源布局布线
苹果也撒狗粮：iOS11新图标脱单了
感谢哈尔滨工业大学对我司HS-225B恒温恒湿试验箱的认可
APS自动排产-AP工厂高级计划
9个比较常用的cmd命令分享
谷歌调用Android TV许可协议棒杀亚马逊
如何通过多模态对比学习增强句子特征学习
华为Mate X2将于2月26日再次开售