0

我正在尝试在 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 可能是最容易使用的。如果我对数据进行硬编码，但不能从视图中绘制，我可以绘制数据。我在从视图中提取数据并将其放入图表时遇到问题。有什么建议么？

4

2 回答 2

0

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

在 openNTF 上有一个现成的用于 Dojo 图形的自定义控件。你可以从那个开始。

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

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

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

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

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

新：

    var data = #{compositeData.data};

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

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

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

让我们知道怎么回事

于 2013-04-25T01:53:10.773 回答
0

我通过使用 jqplot 找到了解决问题的方法。我得到了我的图表并且没有使用 dojo 或脚本库。它绘制了一个同样漂亮的图表。我从 这个网站得到了这个想法 。为了获得绘制我需要的图形的代码，我对提取代码按钮进行了一些修改，并将提取数据和重新绘制按钮合二为一（通过删除部分更新元素 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 函数类似，但我的图表数据不同，我也将其更改为折线图。非常感谢威尔豪！

于 2013-06-28T11:02:47.830 回答