赞
踩
普通图表、电子表格、自定义图表
普通图表和电子表格是在数据可视化和数据处理方面常用的工具,它们在不同场景下有各自的特点和用途。很多BI产品也内置了强大的普通图表设计引擎、电子表格设计引擎,针对用户的数据可视化诉求,提供完整有效的解决方案。
以道一云七析BI产品为例,今天重点给大家分析“自定义图表”功能如何使用。
假设在七析BI中 ,选中了自定义图表组件后,可以看到普通图表界面出现了JS代码编辑区。
在JS语法的基础上,七析封装了一些内嵌函数,帮助用户更方便快捷的进行JS的编写。用户在JS编辑器中,编写完成点击"运行"即可渲染出图。
BI
内嵌函数调用的主函数,文档中的其他内嵌函数都需要通过BI函数进行调用,例如:BI.data()。
data
函数说明 | 返回用户拖入至行列区域、视觉通道以及过滤器的字段计算后的结果集 |
---|---|
调用示例 | var data = BI.data(); |
返回值类型 | 类型:Array<{key:value}> 注意:key是字段别名 |
返回值结果示例 | [ {‘车系1687746858746’: ‘凯美瑞’,‘销量1687746860491’: 8819}, {‘车系1687746858746’: ‘哈弗H6’,‘销量1687746860491’: 2572}, {‘车系1687746858746’: ‘奔驰GLC’,‘销量1687746860491’: 3651}, … …] |
datasetNames
函数说明 | 图表已选择的数据集名称列表(包含关联模型中的数据集),且按页面显示的数据集顺序由上往下排列 |
---|---|
调用示例 | var data = BI.datasetNames(); |
返回值类型 | 类型:Promise<Array<String>>异步Promise对象 |
返回值结果示例 | [‘产品’, ‘订单’, ‘订单明细’, …] |
dataset
函数说明 | 图表已选择的数据集的数据信息 |
---|---|
参数 | 参数1:数组对象,需使用的数据集字段名称集合;参数2:布尔值,是否跟随当前仪表盘中的筛选器控件进行数据过滤 |
调用示例 | 调用示例: var data = BI.dataset([ {‘dataSetName’:‘产品’,‘fieldName’:‘产品名称’,‘showName’:‘名称’}, {‘dataSetName’:‘产品’,‘fieldName’:‘产品分类’,‘showName’:‘分类’}, {‘dataSetName’:‘订单’,‘fieldName’:‘订单编号’,‘showName’:‘订单编号’}],true); 参数解释:- dataSetName:数据集的名称; -fieldName:数据集字段的别名; -showName:返回的结果集中字段的名称(可自定义) |
返回值结果示例 | [ {‘名称’: ‘牛奶’, ‘分类’: ‘饮品’, ‘订单编号’: 1234}, {‘名称’: ‘饼干’, ‘分类’: ‘零食’, ‘订单编号’: 4321}, {‘名称’: ‘芬达’, ‘分类’: ‘饮品’, ‘订单编号’: 5678}, … …] |
getDashboardConfig
函数说明 | 获取当前图表的仪表盘配置,如:背景色、字体、主题等 |
---|---|
调用示例 | var data = BI.getDashboardConfig(); |
返回值类型 | 类型:对象,{key:value, …} |
返回值结果示例 | 结果示例: { “bgColor”: “#F2F3F5”, “color”: “#1D2129”, “fontFamily”: “Arial”, “fontSize”: “14px”, “fontWeight”: “bold”, “theme”: “theme_1”, “titlePosition”: “left”} 参数解释:- bgColor是背景色 -color是字体色; -fontFamily是字体; -fontSize是字号; -fontWeight是字的粗细; -theme是主题; -titlePosition是标题的对其方式 |
getChartConfiguration
函数说明 | 获取当前图表配置,如:视觉通道中颜色、大小等 |
---|---|
调用示例 | var data = BI.getChartConfiguration(); |
返回值类型 | 类型:对象,{key:value, …} |
返回值结果示例 | 结果示例: { “viewConfig”: { “color”: { “type”: “theme”, “value”: “theme_1” }, size: 50 }} 参数解释:- viewConfig:视觉通道配置; - color:视觉通道颜色的配置; - type:theme类型(theme为主题); - value:主题编号(如"theme_1"为一个主题的编号) - size:视觉通道大小的配置 |
getThemeList
函数说明 | 获取仪表盘所有主题及其对应的配置 |
---|---|
调用示例 | var data = BI.getThemeList(); |
返回值类型 | 类型:Array<{key:value}> |
返回值结果示例 | 结果示例: [ { “colors”:[‘#409EFF’, ‘#58D184’, ‘#46C1EB’, ‘#FFCE2F’, ‘#F56649’, ‘#F19A4B’, ‘#AE856B’, ‘#A166CC’, ‘#6F7CAF’, ‘#3CBDB1’], “gradient”:[‘#9CFFF2’, ‘#3271FF’], “themeId”: “theme_1”, “themeName”: “经典” }, { “colors”: [‘#14B9BC’, ‘#83DDFF’, ‘#3DA7F3’, ‘#42E3E3’, ‘#2F94FF’, ‘#74B8FF’, ‘#25A1C7’, ‘#A0D615’, ‘#64D9BA’, ‘#26C4FF’], “gradient”: [‘#E0FF8F’, ‘#2AC6C9’], “themeId”: “theme_2”, “themeName”: “薄荷” }, … …] 参数解释:- colors:主题对应的配色; - gradient:渐变颜色数组; - themeId:主题编号; - themeName:主题名称 |
getThemeById
函数说明 | 根据主题编号获取主题配置 |
---|---|
参数 | 参数1:字符串,主题编号 |
调用示例 | var data = BI.getThemeById(“theme_1”); |
返回值类型 | 类型:对象,对象,{key:value, …} |
返回值结果示例 | 结果示例: { “colors”:[‘#409EFF’, ‘#58D184’, ‘#46C1EB’, ‘#FFCE2F’, ‘#F56649’, ‘#F19A4B’, ‘#AE856B’, ‘#A166CC’, ‘#6F7CAF’, ‘#3CBDB1’], “gradient”:[‘#9CFFF2’, ‘#3271FF’], “themeId”: “theme_1”, “themeName”: “经典”} 参数解释:- colors:主题对应的配色; - gradient:渐变颜色数组; - themeId:主题编号; - themeName:主题名称 |
getChartColorData
函数说明 | 图表视觉通道的颜色信息 |
---|---|
调用示例 | var data = BI.getChartColorData(); |
返回值类型 | 类型:Array<{key:value}> |
返回值结果示例 | 结果示例: [{ “aliasName”: “部门”, “createTimeStamp”: “1687765466583”, “originName”: “部门”, “type”: “ncal”}] **参数解释:- aliasName:视觉通道颜色配置中字段的别名 ; - originName:字段的原名 ; - createTimeStamp:字段拖拽时刻的时间戳 ; - type:区分字段是否为计算字段(ncal表示非计算字段,cal表示为计算字段) |
getChartSizeData
函数说明 | 图表视觉通道的大小信息 |
---|---|
调用示例 | var data = BI.getChartSizeData(); |
返回值类型 | 类型:Array<{key:value}> |
返回值结果示例 | 结果示例: [{ “aliasName”: “销量”, “createTimeStamp”: “1687765466583”, “originName”: “销量”, “type”: “ncal”}] 参数解释:- aliasName:视觉通道大小配置中字段的别名; - originName:字段的原名; - createTimeStamp:字段拖拽时刻的时间戳 ;- type:区分字段是否为计算字段(ncal表示非计算字段,cal表示为计算字段) |
getChartLabelFieldData
函数说明 | 图表视觉通道的标签信息注:当标签信息存在多字段时,按照从上往下的顺序依次在数组中排列 |
---|---|
调用示例 | var data = BI.getChartLabelFieldData(); |
返回值类型 | 类型:Array<{key:value}> |
返回值结果示例 | 结果示例: [{ “aliasName”: “部门”, “createTimeStamp”: “1687765466583”, “originName”: “部门”, “type”: “ncal”}, …] 参数解释:- aliasName:视觉通道标签配置中字段的别名; - originName:字段的原名; - createTimeStamp:字段拖拽时刻的时间戳; - type:区分字段是否为计算字段(ncal表示非计算字段,cal表示为计算字段) |
getChartDetailFieldData
函数说明 | 图表视觉通道的详情信息注:当详情信息存在多字段时,按照从上往下的顺序依次在数组中排列 |
---|---|
调用示例 | var data = BI.getChartDetailFieldData(); |
返回值类型 | 类型:Array<{key:value}> |
返回值结果示例 | 结果示例: [{ “aliasName”: “部门”, “createTimeStamp”: “1687765466583”, “originName”: “部门”, “type”: “ncal”}, …] 参数解释:- aliasName:视觉通道详情配置中字段的别名; - originName:字段的原名; - createTimeStamp:字段拖拽时刻的时间戳 ;- type:区分字段是否为计算字段(ncal表示非计算字段,cal表示为计算字段) |
getChartAngleFieldData
函数说明 | 图表视觉通道的角度信息 |
---|---|
调用示例 | var data = BI.getChartAngleFieldData(); |
返回值类型 | 类型:Array<{key:value}> |
返回值结果示例 | 结果示例: [{ “aliasName”: “销量”, “createTimeStamp”: “1687765466583”, “originName”: “销量”, “type”: “ncal”}] 参数解释:- aliasName:视觉通道角度配置中字段的别名; - originName:字段的原名; - createTimeStamp:字段拖拽时刻的时间戳; - type:区分字段是否为计算字段(ncal表示非计算字段,cal表示为计算字段) |
getChartRowFieldData
函数说明 | 图表行区域拖入的字段信息 |
---|---|
调用示例 | var data = BI.getChartRowFieldData(); |
返回值 | 类型:Array<{key:value}> |
返回值结果示例 | 结果示例: [{ “aliasName”: “部门”, “createTimeStamp”: “1687765466583”, “originName”: “部门”, “fieldType”: “Text”}, …] 参数解释:- aliasName:图表行区域拖入的字段的别名; - originName:字段的原名; - createTimeStamp:字段拖拽时刻的时间戳; - fieldType是字段的类型(Text:文本,Decimal:小数,Integer:整数,Date:日期,DateTime:日期时间) |
getChartColumnFieldData
函数说明 | 图表列区域拖入的字段信息 |
---|---|
调用示例 | var data = BI.getChartColumnFieldData(); |
返回值类型 | 类型:Array<{key:value}> |
返回值结果示例 | 结果示例: [{ “aliasName”: “销量”, “createTimeStamp”: “1687765466583”, “originName”: “销量”, “fieldType”: “Integer”}, …] 参数解释:- aliasName:图表列区域拖入的字段的别名; - originName:字段的原名; - createTimeStamp:字段拖拽时刻的时间戳; - fieldType是字段的类型(Text:文本,Decimal:小数,Integer:整数,Date:日期,DateTime:日期时间) |
getChartColorFieldKeyByIndex
函数说明 | 视觉通道颜色区域拖入的字段,从上到下排列,根据坐标返回字段在集合中所对应的key |
---|---|
参数 | 参数1:数值,索引顺序 |
调用示例 | var data = BI.getChartColorFieldKeyByIndex(0); |
返回值类型 | 类型:字符串或underfined |
返回值结果示例 | 部门 |
getChartSizeFieldKeyByIndex
函数说明 | 视觉通道大小区域拖入的字段,从上到下排列,根据坐标返回字段在集合中所对应的key |
---|---|
参数 | 参数1:数值,索引顺序 |
调用示例 | var data = BI.getChartSizeFieldKeyByIndex(0); |
返回值类型 | 类型:字符串或underfined |
返回值结果示例 | 销量 |
getChartLabelFieldKeyByIndex
函数说明 | 视觉通道标签区域拖入的字段,从上到下排列,根据坐标返回字段在集合中所对应的key |
---|---|
参数 | 参数1:数值,索引顺序 |
调用示例 | var data = BI.getChartLabelFieldKeyByIndex(0); |
返回值类型 | 类型:字符串或underfined |
返回值结果示例 | 部门 |
getChartDetailFieldKeyByIndex
函数说明 | 视觉通道详情区域拖入的字段,从上到下排列,根据坐标返回字段在集合中所对应的key |
---|---|
参数 | 参数1:数值,索引顺序 |
调用示例 | var data = BI.getChartDetailFieldKeyByIndex(0); |
返回值类型 | 类型:字符串或underfined |
返回值结果示例 | 部门 |
getChartAngleFieldKeyByIndex
函数说明 | 视觉通道角度区域拖入的字段,从上到下排列,根据坐标返回字段在集合中所对应的key |
---|---|
参数 | 参数1:数值,索引顺序 |
调用示例 | var data = BI.getChartAngleFieldKeyByIndex(0); |
返回值类型 | 类型:字符串或underfined |
返回值结果示例 | 销量 |
getChartRowFieldKeyByIndex
函数说明 | 图表行区域拖入的字段,从上到下排列,根据坐标返回字段在集合中所对应的key |
---|---|
参数 | 参数1:数值,索引顺序 |
调用示例 | var data = BI.getChartRowFieldKeyByIndex(0); |
返回值类型 | 类型:字符串或underfined |
返回值结果示例 | 部门 |
getChartColumnFieldKeyByIndex
函数说明 | 图表列区域拖入的字段,从上到下排列,根据坐标返回字段在集合中所对应的key |
---|---|
参数 | 参数1:数值,索引顺序 |
调用示例 | var data = BI.getChartColumnFieldKeyByIndex(0); |
返回值类型 | 类型:字符串或underfined |
返回值结果示例 | 销量 |
getEcharts
函数说明 | 获取Echarts,当前支持的版本是5.4.x |
---|---|
调用示例 | const echart = BI.getEcharts(); |
返回值类型 | 对象 |
getEchartsInstance
函数说明 | 获取Echarts实例 |
---|---|
调用示例 | const myEchart = BI.getEchartsInstance(); |
返回值类型 | 对象 |
更多内容,可前往七析帮助中心了解。
使用数据集数据制作图表关键函数为dataset(),下述通过具体的示例来为您演示:
代码示例:
//获取数据集及其关联数据集关联后的结果集,输出的结果集会根据输入的字段以及顺序进行输出 var ds = BI.dataset([ {'dataSetName':'产品','fieldName':'产品名称','showName':'产品名称'}, {'dataSetName':'产品类别','fieldName':'类别名称','showName':'类别'}, {'dataSetName':'产品','fieldName':'已销售量','showName':'已销售量'} ],true); ds = await ds; console.log(ds) var myChart = BI.getEchartsInstance() var option; //构造图表需要的数据结构 var category = BI.keyValueToArrayData(ds, ['类别'])[0]; category = Array.from(new Set(category)) var data = new Array(); $.each(category,function(index,item){ var children = new Array(); var v = 0; $.each(ds,function(i,oo){ if(item===oo['类别']){ var c = { name: oo['产品名称'], value: oo['已销售量'] } v += oo['已销售量']; children.push(c); return true; } }) var a = { name: item, value: v, children: children } data.push(a) }) console.log(data) //制作矩形树图 option = { series: [ { type: 'treemap', data: data } ] }; option && myChart.setOption(option); mg-PpGmRMiG-1699867467768)
使用外部接口的数据制作图表,则需要使用JS语法中的 fetch 函数,且若请求链接存在跨域则搭配内嵌函数中transformBaseUrl()函数来请求外部接口的数据,下述通过具体的示例来为您演示:
代码示例:
//请求外部接口数据,且该接口存在跨域 const url = 'https://api.oioweb.cn/api/weather/GetWeather'; let response = await fetch(BI.transformBaseUrl(url), {method: 'GET'}); //接口返回的数据(JSON对象) var data = await response.json(); data = data['result']['forecast']; //构造折线图需要的数据结构 var xdata = new Array(); var sdata = new Array(); for(var item of data) { xdata.push(item['predictDate']); sdata.push(item['tempDay']); } //折线图 var myChart = BI.getEchartsInstance() var option = { xAxis: { data: xdata }, yAxis: { name: '气温(摄氏度)', axisLabel: { formatter: function (value) { return value + ' °C'; } } }, series: [ { data: sdata, type: 'line' } ], tooltip:{ valueFormatter: function (value) { return value + ' °C'; } } }; myChart.setOption(option);
最后给大家安利一下:七析BI是什么?
七析是一款帮助企业提高数据决策能力的嵌入式自助 BI 平台,无需代码,通过简单的拖拉拽即可实现数据可视化大屏、丰富多样的报表。提供从数据准备、数据处理、数据分析、数据分享于一体的数据可视化解决方案,让各个领域的人员,都能对业务数据进行自由探索和分析。
作者介绍:
道一云,成立于2004年,是中国低代码领域的领导厂商、腾讯战略投资企业、腾讯生态核心合作伙伴。拥有自主知识产权管理软件产品百余项,涵盖数字化应用构建低代码平台-七巧、全场景智能业务分析BI-七析、千人千面、数智化办公企业级门户-七星以及30多款开箱即用的场景应用。
欢迎关注:
公众号:道一云低代码(do1info)
官网: https://www.do1.com.cn/
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。