“自定义图表”的版本间的差异

来自BDP个人版帮助中心
跳转至: 导航搜索
(创建页面,内容为“使用说明 1. 开发要求 自定义图表需要不同程度的开发能力,功能列表: 功能 介绍 开发能力要求 表格拼接 基于Javascript,提...”)
 
2.区域注释:
 
(未显示同一用户的12个中间版本)
第1行: 第1行:
使用说明
+
===使用说明===
1. 开发要求
+
====开发要求====
自定义图表需要不同程度的开发能力,功能列表:
+
自定义图表需要不同程度的开发能力,功能列表:<br>
 +
[[文件:基本操作-1.png]]
  
功能 介绍 开发能力要求
+
====使用流程====
表格拼接 基于Javascript,提供了简单易用的表格拼接方法,轻松完成表格定制。 无,零门槛
+
两步:数据准备+图表制作
图表制作 使用Vega,一种描述性可视化语法,源于D3.js,通过描述图表形态即可完成可视化、交互设置。 初级开发能力
 
Javascript 完整Javascript在线编辑器,最大的开放能力,可使用各种JS框架和代码库。 较好开发能力
 
2. 使用流程
 
两步:数据准备!+图表制作!
 
  
3. 开始使用
+
====开始使用====
1、 入口在仪表盘或工作表的左上角“添加图表”,点击后选择“自定义图表”类型和所需使用的一张工作表(编辑时还可以添加其他工作表),进入图表编辑;
+
1.入口在仪表盘或工作表的左上角“添加图表”,点击后选择“自定义图表”类型和所需使用的一张工作表(编辑时还可以添加其他工作表),进入图表编辑;
2、 进入数据视图,自定义图表分为数据视图、图表视图两部分。数据视图与普通的BDP图表编辑相似,结果实时保存;
+
[[文件:基本操作-2.png]]
左边栏:左侧为数据来源相关操作,与普通图表不同的是,增加了数据集如下图,需要拖拽移动某张“工作表”至“数据集”开始数据准备;其中工作表和数据集均可以添加多个单位,每个数据集可在图表视图中使用。字段功能与普通图表一致。
+
[[文件:基本操作-3.png]]
中间部分:主要的数据准备和展示区,处理后的数据集将直接用于“图表视图”。相比普通工作表,没有“添加次轴”,结果的展现形式固定为表格。
 
右边栏:图表和数据集的其他设置,其中数据集设置仅作用于某个数据集,不同数据集须分别设置;
 
数据集支持的设置:图内筛选器、总计、显示条目数
 
3、 切换图表视图,准备好数据集后即可进入图表制作,图表编辑界面的顶部可切换视图状态,图表视图与数据视图不同,内容需要保存后生效,可使用运行查看结果;
 
  
图表编辑支持两种语法,Vega和Javascript,可在“语言“设置处修改;
+
2.进入数据视图,自定义图表分为数据视图、图表视图两部分。数据视图与普通的BDP图表编辑相似,结果实时保存;
左侧为图表编辑区,在此输入上面选择的图表语法,完成后使用下方的运行查看结果;
+
*左边栏:左侧为数据来源相关操作,与普通图表不同的是,增加了数据集如下图,需要拖拽移动某张“工作表”至“数据集”开始数据准备;其中工作表和数据集均可以添加多个单位,每个数据集可在图表视图中使用。字段功能与普通图表一致。
右侧为图表效果预览区,左下角的“CONSOLE”可展示调试面板,用于调试语法开发的调试及报错信息;
+
*中间部分:主要的数据准备和展示区,处理后的数据集将直接用于“图表视图”。相比普通工作表,没有“添加次轴”,结果的展现形式固定为表格。
完成后切勿忘记保存!
+
*右边栏:图表和数据集的其他设置,其中数据集设置仅作用于某个数据集,不同数据集须分别设置;
 +
*数据集支持的设置:图内筛选器、总计、显示条目数
 +
[[文件:基本操作-4.png]]
  
 +
3.切换图表视图,准备好数据集后即可进入图表制作,图表编辑界面的顶部可切换视图状态,图表视图与数据视图不同,内容需要保存后生效,可使用运行查看结果;
 +
*图表编辑支持两种语法,Vega和Javascript,可在“语言“设置处修改;
 +
*左侧为图表编辑区,在此输入上面选择的图表语法,完成后使用下方的运行查看结果;
 +
*右侧为图表效果预览区,左下角的“CONSOLE”可展示调试面板,用于调试语法开发的调试及报错信息;
 +
*完成后切勿忘记保存!
 +
[[文件:基本操作-5.png]]
  
5、 特殊说明
+
4.特殊说明
 +
*数据集顺序暂不支持调整,默认按照创建顺序展示,在图表视图中使用时可根据数据集顺序引用数据;
 +
*两种视图模式的保存状态不一致,数据视图与普通图表为实时保存,图表视图中内容需要点击保存;
 +
*数据集的图内筛选器共同作用于最终图表,注意筛选器名称为 维度 或 字段 的名称,尽量避免重名;
 +
*数据视图中的数据集、维度和数值名称,有可能影响图表视图结果,修改时请注意调整;
 +
*仪表盘不支持功能:导出excel、导出PDF、联动。
  
数据集顺序暂不支持调整,默认按照创建顺序展示,在图表视图中使用时可根据数据集顺序引用数据;
+
====图表调试====
两种视图模式的保存状态不一致,数据视图与普通图表为实时保存,图表视图中内容需要点击保存;
 
数据集的图内筛选器共同作用于最终图表,注意筛选器名称为 维度 或 字段 的名称,尽量避免重名;
 
数据视图中的数据集、维度和数值名称,有可能影响图表视图结果,修改时请注意调整;
 
仪表盘不支持功能:导出excel、导出PDF、联动。
 
4. 图表调试
 
 
调试(Debug)常用于编辑图表时,查看输出结果或报错信息,开发视图的调试面板暂未开放,可使用浏览器自带的调试工具的 Console 进行替代,通常在设置中可打开,打开方式以Chrome为例:
 
调试(Debug)常用于编辑图表时,查看输出结果或报错信息,开发视图的调试面板暂未开放,可使用浏览器自带的调试工具的 Console 进行替代,通常在设置中可打开,打开方式以Chrome为例:
 +
*Windows操作系统
 +
1.快捷键:F12 或 Ctrl + Shift + I
 +
2.页面中右键点击“检查”
 +
*Mac操作系统
 +
1快捷键:Command + Option(Alt) + I
 +
2页面中右键点击“检查”
 +
[[文件:基本操作-6.png]]
  
Windows操作系统
+
===代码注释===
快捷键:F12 或 Ctrl + Shift + I
 
页面中右键点击“检查”
 
Mac操作系统
 
快捷键:Command + Option(Alt) + I
 
页面中右键点击“检查”
 
 
 
 
 
5. 代码注释
 
 
使用图表视图时需要有时需要隐藏掉部分代码,使其不生效,又不想删掉这部分代码,可以使用注释,图表视图的注释为JS语法,有一下两种注释方式:
 
使用图表视图时需要有时需要隐藏掉部分代码,使其不生效,又不想删掉这部分代码,可以使用注释,图表视图的注释为JS语法,有一下两种注释方式:
 +
====1.单行注释:====
 +
[[文件:基本操作-7.png]]
  
单行注释:
+
====2.区域注释:====
//这里的东西不需要运行
+
[[文件:基本操作-8.png]]
区域注释:
 
/*
 
这里的东西不需要运行
 
这里的东西不需要运行
 
这里的东西不需要运行
 
*/
 

2018年1月4日 (四) 07:21的最新版本

使用说明

开发要求

自定义图表需要不同程度的开发能力,功能列表:
基本操作-1.png

使用流程

两步:数据准备+图表制作

开始使用

1.入口在仪表盘或工作表的左上角“添加图表”,点击后选择“自定义图表”类型和所需使用的一张工作表(编辑时还可以添加其他工作表),进入图表编辑; 基本操作-2.png 基本操作-3.png

2.进入数据视图,自定义图表分为数据视图、图表视图两部分。数据视图与普通的BDP图表编辑相似,结果实时保存;

  • 左边栏:左侧为数据来源相关操作,与普通图表不同的是,增加了数据集如下图,需要拖拽移动某张“工作表”至“数据集”开始数据准备;其中工作表和数据集均可以添加多个单位,每个数据集可在图表视图中使用。字段功能与普通图表一致。
  • 中间部分:主要的数据准备和展示区,处理后的数据集将直接用于“图表视图”。相比普通工作表,没有“添加次轴”,结果的展现形式固定为表格。
  • 右边栏:图表和数据集的其他设置,其中数据集设置仅作用于某个数据集,不同数据集须分别设置;
  • 数据集支持的设置:图内筛选器、总计、显示条目数

基本操作-4.png

3.切换图表视图,准备好数据集后即可进入图表制作,图表编辑界面的顶部可切换视图状态,图表视图与数据视图不同,内容需要保存后生效,可使用运行查看结果;

  • 图表编辑支持两种语法,Vega和Javascript,可在“语言“设置处修改;
  • 左侧为图表编辑区,在此输入上面选择的图表语法,完成后使用下方的运行查看结果;
  • 右侧为图表效果预览区,左下角的“CONSOLE”可展示调试面板,用于调试语法开发的调试及报错信息;
  • 完成后切勿忘记保存!

基本操作-5.png

4.特殊说明

  • 数据集顺序暂不支持调整,默认按照创建顺序展示,在图表视图中使用时可根据数据集顺序引用数据;
  • 两种视图模式的保存状态不一致,数据视图与普通图表为实时保存,图表视图中内容需要点击保存;
  • 数据集的图内筛选器共同作用于最终图表,注意筛选器名称为 维度 或 字段 的名称,尽量避免重名;
  • 数据视图中的数据集、维度和数值名称,有可能影响图表视图结果,修改时请注意调整;
  • 仪表盘不支持功能:导出excel、导出PDF、联动。

图表调试

调试(Debug)常用于编辑图表时,查看输出结果或报错信息,开发视图的调试面板暂未开放,可使用浏览器自带的调试工具的 Console 进行替代,通常在设置中可打开,打开方式以Chrome为例:

  • Windows操作系统

1.快捷键:F12 或 Ctrl + Shift + I 2.页面中右键点击“检查”

  • Mac操作系统

1快捷键:Command + Option(Alt) + I 2页面中右键点击“检查” 基本操作-6.png

代码注释

使用图表视图时需要有时需要隐藏掉部分代码,使其不生效,又不想删掉这部分代码,可以使用注释,图表视图的注释为JS语法,有一下两种注释方式:

1.单行注释:

基本操作-7.png

2.区域注释:

基本操作-8.png