Dojo：从视图中提取数据以在 xpages 中绘制折线图答案

【问题标题】：Dojo: extracting data from view to plot a line graph in xpagesDojo：从视图中提取数据以在 xpages 中绘制折线图
【发布时间】：2013-04-24 15:15:09
【问题描述】：

我正在尝试在 xpages 中使用 dojo 绘制折线图。我有一个脚本库，其中包含从称为 plots 的视图中获取值的代码（该视图分别在两个不同的列中包含 x 和 y 轴的时间和温度值）。我正在尝试将这些值放入 JSON 中，然后提取它们以绘制图形。

这部分脚本库应该是把视图中的值转换成 JSON

  var vw = database.getView('plots');
  var vwEntries = vw.getAllEntries();
  var Count = vwEntries.getCount();
  var vwEntry = vwEntries.getFirstEntry();

 var plot_temp = vwEntry.getColumnValues().elementAt(1);
 var plot_time = vwEntry.getColumnValues().elementAt(2);

  for (var x=1; x < vwCount; x++){

      var vwEntry = vwEntries.getNextEntry(vwEntry);
      plot_temp = plot_temp+","+vwEntry.getColumnValues().elementAt(1);
      plot_time = plot_time+","+vwEntry.getColumnValues().elementAt(2);
  }      

 getComponent("extracted_temp").setValue("["+plot_temp+"]");
 getComponent("extracted_time").setValue("["+plot_time+"]");

脚本库的其余部分包含绘制图形的代码，但我不确定使用什么命令来绘制 JSON 值。

到目前为止，它还没有工作。这就是我尝试绘制图表的方式。它不起作用。

chart1.addSeries("Series 1", [ vw ], {stroke: {color: "green"}});

我在页面上还有一个 div 用于指定绘图的大小。

我曾尝试使用 D3 和 jqplot，但我发现 dojo 可能是最容易使用的。如果我对数据进行硬编码，但不能从视图中绘制，我可以绘制数据。我在从视图中提取数据并将其放入图表时遇到问题。有什么建议吗？

【问题讨论】：

你能告诉我们vw中的数据是什么样的吗？
也许变量“vwCount”没有被正确设置，因为你在初始化程序中使用了“Count”......我还建议在 (vwEntry != null) 上进行交互，这样你就只有一组代码..

标签： view dojo plot xpages

【解决方案1】：

您可以尝试更多图形库:-)

有一个现成的 custom control on openNTF 用于 Dojo 图形。你可以从那个开始。

您似乎面临的重复问题是如何将后端数据导入前端 JavaScript。一旦你掌握了这一点，你就可以使用任何库。所有库都提供了 2 种方法：“静态”值（硬编码时使用的值）或 Ajax 查找。

以下是您应该采取的步骤：

创建一个您想在自定义控件中看到的静态图形 - 确保它工作正常
将页面上的静态 JS 代码移动到 xp:outputScript 控件中（静态很好） - 确保它工作正常
在自定义控件属性中将您想要改变的所有值（核心数据、标签或其他）定义为变量。例如。 data、xAxisLabel、yAxisLabel - 将它们定义为字符串！
在放置自定义控件的页面上，将自定义属性的值作为静态值输入
现在在您的 outputScript 标记中用参数替换您的静态值 - 确保它工作正常。示例：

旧（您的工作代码 - 不管它是什么）：

    var data = [{label : "test", value : 7}, {label : "x", value : 8}];

新：

    var data = #{compositeData.data};

现在测试一下。您的图表必须正确显示 - 否则您错过/搞砸了一步。

最后一步：在页面上将自定义控件属性中的静态值替换为生成与您输入的静态字符串完全相同的字符串所需的任何代码。

有更多变体如何做到这一点，一般的想法是 outputScript 标签与 #{EL} 表达式的组合。不要一口气尝试所有这些。逐步验证该步骤是否有效。否则你无法确定失败的地方。

告诉我们进展如何

【讨论】：

感谢您的建议。我设法提取了数据，并且我有一个从视图中绘制数据的图表。不过，它几乎没有问题。它只延伸到 12 个点。
当您在浏览器中查看页面源代码时：所有值都在那里吗？如果是：您的 Dojo 中存在问题。如果不是：您的提取码有问题
我认为是提取码。目前的情况是 - 当我提取数据时，我已将包含 x 轴值的字段设置为 0（默认值），该字段应该填充有从视图中提取的值，但由于某种原因它仍然存在在默认值。但奇怪的是它在 x 轴上绘制了正确值的正确图表。它只是不更新字段。很奇怪。当我更改默认值时，它仍然显示默认为 0。
如果你分享你的实际代码而不是仅仅描述它，你可能会有机会有人指出问题。并且您不应该使用 UI 中的字段将值传输到您的 JavaScript。使用自定义控件属性。

【解决方案2】：

我通过使用 jqplot 找到了解决问题的方法。我得到了我的图表并且没有使用 dojo 或脚本库。它绘制了一个同样漂亮的图表。我从this website得到了这个想法 .为了获得绘制所需图形的代码，我对提取代码按钮进行了一些修改，并将提取数据和重新绘制按钮合二为一（通过删除部分更新元素 ID），因此代码如下所示

var viewPanel = getComponent("viewPanel1"); //in the view panel select the check box
var docIDArray = viewPanel.getSelectedIds(); //get that selected ID

for (i = 0; i < docIDArray.length; i++) {
var docId = docIDArray[i];
var doc = database.getDocumentByID(docId);
var moo = doc.getItemValue("LoggerID"); //selected ID is defined
var h = doc.getItemValue("G");
var e = doc.getItemValue("IE");
var f = doc.getItemValue("FF");
var c = doc.getItemValue("CH");
var s = doc.getItemValue("SA");
var o = doc.getItemValue("OP");
var l = doc.getItemValue("LM");

//comparing the entries to the selected ID and if found extracting the values for LoggerID

var vw = database.getView('BrowserStats'); //Get the Notesview
var vwEntries = vw.getAllEntries(); //Get handle of all entries
var vwCount = vwEntries.getCount(); //Get the Count to use as uBound
var vwEntry = vwEntries.getFirstEntry(); //Get first value

//Get the first entry and get the column value of the first entry

var plot_LoggerID = vwEntry.getColumnValues().elementAt(2);
var plot_G = vwEntry.getColumnValues().elementAt(5);    
var plot_IE = vwEntry.getColumnValues().elementAt(6);    
var plot_FF = vwEntry.getColumnValues().elementAt(7);    
var plot_CH = vwEntry.getColumnValues().elementAt(8);    
var plot_SA = vwEntry.getColumnValues().elementAt(9);
var plot_OP = vwEntry.getColumnValues().elementAt(10);    
var plot_LM = vwEntry.getColumnValues().elementAt(11);            

for (var x = 1; x < vwCount; x++) {
//    Looping through all the entries and collect the column values
vwEntry = vwEntries.getNextEntry(vwEntry);
plot_LoggerID = plot_LoggerID + "," + vwEntry.getColumnValues().elementAt(2);
plot_G = plot_G + "," + vwEntry.getColumnValues().elementAt(5);    
plot_IE = plot_IE + "," + vwEntry.getColumnValues().elementAt(6);    
plot_FF = plot_FF + "," + vwEntry.getColumnValues().elementAt(7);    
plot_CH = plot_CH + "," + vwEntry.getColumnValues().elementAt(8);    
plot_SA = plot_SA + "," + vwEntry.getColumnValues().elementAt(9);    
plot_OP = plot_OP + "," + vwEntry.getColumnValues().elementAt(10);    
plot_LM = plot_LM + "," + vwEntry.getColumnValues().elementAt(11);    

}

getComponent("extracted_LoggerID").setValue(moo);
getComponent("extracted_G").setValue(h);
getComponent("extracted_IE").setValue(e);    
getComponent("extracted_FF").setValue(f);    
getComponent("extracted_CH").setValue(c);    
getComponent("extracted_SA").setValue(s);    
getComponent("extracted_OP").setValue(o);   
getComponent("extracted_LM").setValue(l);       
}

jqplot 函数类似，但我的图表数据不同，我也将其更改为折线图。非常感谢 Wil How！

【讨论】：