我读了Dong Pan的优秀博客"Migrate VizPacker based Lumira Visualization Extensions to Web IDE"（将基于VizPacker的Lumira Visualization Extensions迁移到Web IDE），并想亲自检查一下迁移（或移植）是否那么简单。
这个博客非常详细地描述了我是如何将Bullet chart Visualization extension（来自Matt Lloyd）从Lumira VizPacker实用程序移植到SAP的WebIDE.
Spoiler–是的，将可视化扩展从Lumira VizPacker实用程序移植到SAP WebIDE就是这么简单。
一些背景信息
SAP WebIDE版本1.10.2.
SAP WebIDE VizPacker插件版本1.1.2.
SAP Lumira个人版版本1.25.1.
起点/先决条件
这个博客扩展了一点不仅仅是移植过程。我将呈现以下内容：
由于博客的大小，我将其分为两部分。
这部分将涵盖从SAP Lumira VizPacker实用程序到SAP Web IDE的所有移植。
第二部分（将Bullet Chart从Lumira VizPacker实用程序迁移到SAP Web IDE VizPacker插件–第2部分）涵盖从SAP Web IDE到SAP的部署Lumira.
让我们开始…
VizPacker插件启用了吗？
登录SAP Web IDE后，您将看到右侧工具栏上的VizPacker插件窗格图标和顶部工具栏上的VizPacker"打包"图标，如下图所示。如果您没有看到它们，这意味着您需要启用VizPacker插件。启用VizPacker插件将在下一节中介绍。
启用SAP Web IDE VizPacker插件（也是验证VizPacker插件已启用的另一种方法）
在SAP Web IDE中–进入工具>首选项（见下图）
在出现的屏幕中选择"可选插件"（见下图）下面）。
在出现的屏幕中–如果选中VizPacker插件旁边的复选框，淘客查询，则表示VizPacker插件已启用。
如果未选中复选框，企业管理类软件，则通过选中该复选框来启用VizPacker插件，然后刷新浏览器以进行启用。
生成一个空的可视化扩展在Web IDE中，选择File>New>project from Template（文件>新建>模板中的项目）（见下图）。
使用下拉列表筛选VizPacker模板：
选择"visualization extension"模板并单击"Next"。
填写项目名称。这将是将出现在SAP Web IDE工作区中的项目名称。
单击"下一步"。
填写扩展名。选择可视扩展时，此名称将出现在SAP Lumira中。
填写扩展ID。从SAP Web IDE打包扩展以及将扩展部署到SAP Lumira时，您将使用此ID。
填写版本号。
您可以保留其余字段的默认值。
单击"下一步"。
由于项目符号图表基于SVG，确保"使用SVG"已标记。
取消选中"图例"。
单击"下一步"。
单击"浏览"。
选择项目符号.csv"在使用SAP Lumira VizPacker实用程序开发项目符号图表时使用的。"项目符号.csv"示例数据出现在屏幕上。
单击"下一步"。
创建尺寸/度量。以下是一些重要提示：
以下是您在单击"下一步"之前需要达到的目标。
单击"完成"。
项目是在SAP Web IDE中创建的，并且渲染.js文件在编辑器窗格中打开。
从Lumira VizPacker实用程序移植到SAP Web IDE
复制Lumira VizPacker实用程序渲染.js代码从右下方的"var render=…"到"//END:sample render code"。
复制从这里开始的代码段：
到这里结束：
将代码段粘贴到渲染.js在SAP Web IDE中，出现"//TODO:在下面添加您自己的可视化实现代码…"。
使用SAP Web IDE编辑>"美化"使代码更可读。
从选项卡标题中的"*"可以看出，文件未保存，微信返利机器人可靠吗，而在右侧的预览窗格中，图表未更新。
单击"保存"以"保存"图表渲染.js文件，然后"刷新"以刷新预览窗格。
真令人惊讶…图表的方向是正确的，但有点不对劲。所有的条都是黑色的。
原因是CSS没有更新。我们也需要从Lumira VizPacker实用程序导入is。
返回到Lumira VizPacker实用程序并选择样式.css制表符
复制样式.css选项卡
在SAP Web IDE工作区中展开"样式"文件夹并打开默认.css"文件（双击）。
粘贴复制的代码"样式表"到这个文件。它应该完全替换那里的所有代码？不要忘记"保存"文件并单击预览窗格"刷新"按钮。
总结我们迄今为止所做的工作–可视化扩展已移植到SAP Web IDE，并准备好从SAP Web IDE部署到SAP Lumira。
继续阅读…将项目符号图从Lumira VizPacker实用工具迁移到SAP Web IDE VizPacker插件–第二部分
-拉兹
嗨，
这真是一个很好的指导方法。我从中受益匪浅。
只想指出两个地方需要特别强调。
1:如果复选框未选中，则选中VizPacker插件，然后刷新浏览器以进行启用。
这里的刷新非常重要。
2:复制渲染.js内容，似乎只有sap.viz.ext公司.子弹头.zip作品。
致以最诚挚的问候。
孟
很好的解释，拉兹！
非常详细和简洁！
拉兹，非常感谢你的帖子。但是，我已经遵循了所有的步骤，我不能使它工作。
当我把代码粘贴到渲染.js，我得到了很多错误，说：xxxx变量已经声明在上限范围内。
你知道这可能是什么吗？
谢谢
这些是警告！代码将成功运行。这是由于启用了JSLint
我肯定是做错了什么，因为我在运行代码时什么都看不到。
你能提供我必须粘贴到渲染.js文件？
谢谢
define（"sap\u viz\u ext\u bullet-src/js/render"，[]，function（）{
/*
*这个函数是一个绘图函数，你应该把你所有的绘图逻辑都放在里面。
*它被调用了moduleFunc.prototype.render模块
*@param{Object}data-处理的数据集，检查数据映射.js
*@param{Object}container-的目标d3.selection元素绘图区域
*@示例
*容器大小：这个。宽度（）或这个。身高（）
*图表属性：这个。属性（）
*尺寸信息：数据元维度（）
*措施信息：数据元度量（）
*/
var render=函数（数据，容器）{
var width=这个。宽度（），
高度=这个。身高(),
调色板=这是调色板（），
属性=这个。属性（），财务大数据，
调度=这是派送（）；
//容器.selectAll（"svg"）.remove（）；
var vis=容器.append（"svg"）.attr（"width"，width）.attr（"height"，height）
.append（"g"）.attr（"class"，"vis"）.attr（"width"，width）.attr（"height"，高度）；
//开始：柱状图的示例呈现代码
//用自己的代码替换下面的代码以开发新的扩展
/**
*要获取维度集，可以使用维度集的名称或索引，例如
*var dset_xaxis=数据元维度（"X轴"）；//按名称
*var dset1=数据元维度（0）；//按索引
*
*获取维度或度量值名称时，应只使用维度的索引，淘客发单软件，避免使用
*硬编码名称。
*var dim1=dset xaxis[0]；//维度集"X轴"的第一个维度的名称
*
*度量值同样的规则也适用于使用数据元度量（）
*/
var dset1=数据元维度（0），//Titles
dim_title=dset1[0]，
dim_subtitle=dset1[1]；
var mset1=数据元度量（0），//实际值
ms_actual=mset1[0]，
ms_pace=mset1[1]；
var mset2=数据元度量（1） ，//范围
ms\u目标=mset2[0]；
var mset3=数据元度量（2） ，//目标
ms_range1=mset3[0]，
ms_range2=mset3[1]，
ms_range3=mset3[2]；
//根据Stephen Lew的建议进行图表设计。实施
//Clint Ivy、Jamie Love和Jason Davies的工作
//http://projects.instantcongnition.com/protovis/bulletchart/
var d3_bullet=function（）{
var orient="left"，//TODO top&bottom
reverse=false，
duration=0，
ranges=bulletRanges，
markers=bulletMarkers，
measures=bulletMeasures，
宽度=380，
高度=30，
格式=null；
//对于每个小倍数…
功能项目符号（g）{
g.each（功能（d，i）{
变量范围Z=范围.调用（this，d，i）.slice（）.sort（d3.降序），
markerz=标记。呼叫（this，d，i）.slice（）.sort（d3.降序），
measurez=措施.call（this，d，i）.slice（）.sort（d3.降序），
g=d3.选择（此）；
//MDL:调整范围，以便我们总是在背景中绘制一些内容。
var maxMarker=(标记长度> 0 ? markerz[0]：0）；
var maxMeasure=(测量长度> 0 ? measurez[0]：0）；
var最大范围=(范围Z.长度> 0 ? rangez[0]：0）；
var maxValue=数学.max（maxMarker、maxMeasure、maxRanges）；
如果(范围Z.长度== 0) {
射程Z.push（maxValue）；
}else if（rangez[0]
