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

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

2018年1月3日 (三) 09:00的版本

使用说明

1. 开发要求

自定义图表需要不同程度的开发能力,功能列表:

2. 使用流程

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

3. 开始使用

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

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

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

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

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

d.特殊说明

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


4. 图表调试

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

1.Windows操作系统

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

2.Mac操作系统

  • 快捷键:Command + Option(Alt) + I
  • 页面中右键点击“检查”

5. 代码注释

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

单行注释:

  • //这里的东西不需要运行

区域注释:

/* 这里的东西不需要运行 这里的东西不需要运行 这里的东西不需要运行

  • /