【发布时间】:2017-09-10 04:30:51
【问题描述】:
我一直在使用 Primefaces 图表并取得了一些成功,但我想了解更多关于 jqPlot 的信息,以便进行更灵活的自定义。一个例子是我想创建一个组合图(条形图和折线组合)。
我希望通过从 XHTML 页面触发 jQuery 函数来创建图表:
<button type="button" class="button" onclick="comboChart()">Combo Chart</button>
函数是:
function comboChart() {
var line1 = [#{chartDataBean.comboChartMapList}];
var line2 = [#{chartDataBean.linePartChartMap}];
var plot2 = $.jqplot('testchart', [line1, line2], {
series: [{renderer: $.jqplot.BarRenderer}, {xaxis: 'x2axis', yaxis: 'y2axis'}],
axesDefaults: {
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
tickOptions: {
angle: 30
}
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer
},
x2axis: {
renderer: $.jqplot.CategoryAxisRenderer
},
yaxis: {
autoscale: true
},
y2axis: {
autoscale: true
}
}
});
};
JSF bean 包含一个地图数组列表,其中每个地图都是一个系列:
public List<HashMap<Object, Double>> getComboChartMapList() {
List<List<Endatapoint>> modbinholder = new ArrayList<List<Endatapoint>>
();
modbinholder = anBean.getModelBinList();
comboChartMap = new HashMap<>();
comboChartMapList = new ArrayList<>();
for (List<Endatapoint> cList : modbinholder) {
List<Endatapoint> pholder = new ArrayList<>();
pholder = cList;
for (Endatapoint p : pholder) {
Date lDate = p.getPointdate();
String pnits = p.getRecords().getSnipunit();
Double aNum = p.getActualnum();
comboChartMap.put(pnits, aNum);
comboChartMapList.add(comboChartMap);
}
}
return comboChartMapList;
}
上面只是生成一个没有数据的空白图表。查看 Chrome 和 FF (Firebug) 中的 JS 控制台,我注意到生成列表值的语法错误,如下所示:
var line1 = [[{Million Dollars=54.7}, {Million Dollars=54.7}]];
但是 jqplot 文档要求像这样生成值:
var line1 = [['Million Dollars', 54], ['Million Dollars', 54.7]];
我的问题是:
- 我在上面的代码中做错了什么?
- 我可以使用上面的代码传递正确的值,还是需要使用任何其他方法,例如 JSON?
我在这里阅读的大多数示例和问题似乎都涉及 JSON 将动态值传递给 jplot。如果可能的话,我想坚持只使用 Java 对象。
【问题讨论】:
-
Json 是必需的,这就是 PrimeFaces 在幕后为您做的事情
标签: javascript java jquery jsf-2 jqplot