Tapestry chenillekit 图表:定义 trackFormatter 函数的问题
我需要帮助在挂毯页面中显示图表。我使用的是 Tapestry 5.2.4 和 chenillekit 1.3.0。 我的问题是我想定义一个自定义 JavaScript 函数来在鼠标轨迹中显示日期。 Flotr 的选项是 trackFormatter : function(obj){...}。 就我而言,我使用 JSON 发送图表选项。 调用该函数时,出现如下错误:
对于 Firefox,“n.mouse.trackFormatter 不是函数”,
对于 chrome,“未捕获的 TypeError:对象 # 的属性‘trackFormatter’不是函数”。
有人有同样的问题和/或找到了 delcare 自定义 javascript 函数(如 trackFormatter)的解决方案吗?谢谢!
我的代码:
...
import org.apache.tapestry5.json.JSONLiteral;
import org.apache.tapestry5.json.JSONObject;
...
@Import(library = { "mymouseeventhandler.js" })
public class LineChart extends Chart {
private static final Logger logger = LoggerFactory.getLogger(LineChart.class);
/**
* Map <Label , List of data> .
*/
@Parameter(required = true, defaultPrefix = BindingConstants.PROP)
private Map<String, List<XYDataItem>> counterDataWithLabel;
/**
* Map <Label , List of data> .
*/
@Parameter(required = false, defaultPrefix = BindingConstants.PROP)
private Map<String, List<XYDataItem>> thresholdDataWithLabel;
@Parameter
private Date startTime;
@Parameter
private String graphCaption;
/**
* Configure Flotr Graph
*
* <p>
* <a href="http
* ://www.chenillekit.org/chenillekit-tapestry/ref/org/chenillekit/tapestry/core/components
* /Chart.html">ChenilleKit Reference </a>
* </p>
* <p>
* <a href="http://solutoire.com/flotr/docs/options/">Flotr Options </a>
* </p>
*
*/
protected void configure(JSONObject config) {
// TODO add attributes to LineChart, for being able to parameterize the graph.
// counterDataWithLabel;
StringBuilder dataString = new StringBuilder("[");
Calendar calendar = Calendar.getInstance();
calendar.setTime(getStartTime());
int startMillisecond = calendar.get(Calendar.MILLISECOND);
int i = 0;
for (Map.Entry<String, List<XYDataItem>> entry : counterDataWithLabel.entrySet()) {
String label = entry.getKey();
List<XYDataItem> dataItems = entry.getValue();
dataString.append(String.format("{data: %s, label: '%s' , lines:{lineWidth: 1}}",
Arrays.toString(dataItems.toArray()), label));
dataString.append(",");
i++;
}
if (!org.apache.commons.collections.MapUtils.isEmpty(thresholdDataWithLabel)) {
int j = 0;
for (Map.Entry<String, List<XYDataItem>> entry : thresholdDataWithLabel.entrySet()) {
String label = entry.getKey();
List<XYDataItem> dataItems = entry.getValue();
dataString.append(String.format(
"{data: %s, label: '%s' , points: {show: false} , lines:{lineWidth: 3 }}",
Arrays.toString(dataItems.toArray()), label));
if (j < thresholdDataWithLabel.size() - 1) {
dataString.append(",");
}
j++;
}
}
dataString.append("]");
config.put("data", new JSONArray(dataString.toString()));
JSONObject options = new JSONObject();
options = flotrChart.getOptions();
options.put("HtmlText", false);
JSONObject mouse = new JSONObject();
mouse.put("track", true);
mouse.put("trackFormatter", new JSONLiteral("dateFormatter(obj)").toString());
options.put("mouse", mouse);
config.put("options", options);
logger.debug("## config : " + config.toString());
}
/**
* @return the startTime
*/
public Date getStartTime() {
return startTime;
}
/**
* @param startTime
* the startTime to set
*/
public void setStartTime(Date startTime) {
this.startTime = startTime;
}
}
mymouseeventhandler.js:
function dateTracker(obj){
var dateToDisplay = new Date(parseInt(obj.x));
var fullYear = dateToDisplay.getFullYear();
var month = dateToDisplay.getMonth();
var date = dateToDisplay.getDate();
return '('+fullYear+'-'+month+'-'+date+' , '+obj.y+')';
}
I need help to display chart in tapestry pages. I'm using tapestry 5.2.4 and chenillekit 1.3.0.
My problem is that I want to defined a custom javascript function to display date in the mouse track. The option for Flotr is trackFormatter : function(obj){...}.
In my case, I send option for the graph with JSON.
When the function is called, i have error like this:
"n.mouse.trackFormatter is not a function" for firefox,
"Uncaught TypeError: Property 'trackFormatter' of object # is not a function" for chrome.
Does someone have the same problem and/or have find a solution to delcare custom javascript function like trackFormatter? thanks!
My code:
...
import org.apache.tapestry5.json.JSONLiteral;
import org.apache.tapestry5.json.JSONObject;
...
@Import(library = { "mymouseeventhandler.js" })
public class LineChart extends Chart {
private static final Logger logger = LoggerFactory.getLogger(LineChart.class);
/**
* Map <Label , List of data> .
*/
@Parameter(required = true, defaultPrefix = BindingConstants.PROP)
private Map<String, List<XYDataItem>> counterDataWithLabel;
/**
* Map <Label , List of data> .
*/
@Parameter(required = false, defaultPrefix = BindingConstants.PROP)
private Map<String, List<XYDataItem>> thresholdDataWithLabel;
@Parameter
private Date startTime;
@Parameter
private String graphCaption;
/**
* Configure Flotr Graph
*
* <p>
* <a href="http
* ://www.chenillekit.org/chenillekit-tapestry/ref/org/chenillekit/tapestry/core/components
* /Chart.html">ChenilleKit Reference </a>
* </p>
* <p>
* <a href="http://solutoire.com/flotr/docs/options/">Flotr Options </a>
* </p>
*
*/
protected void configure(JSONObject config) {
// TODO add attributes to LineChart, for being able to parameterize the graph.
// counterDataWithLabel;
StringBuilder dataString = new StringBuilder("[");
Calendar calendar = Calendar.getInstance();
calendar.setTime(getStartTime());
int startMillisecond = calendar.get(Calendar.MILLISECOND);
int i = 0;
for (Map.Entry<String, List<XYDataItem>> entry : counterDataWithLabel.entrySet()) {
String label = entry.getKey();
List<XYDataItem> dataItems = entry.getValue();
dataString.append(String.format("{data: %s, label: '%s' , lines:{lineWidth: 1}}",
Arrays.toString(dataItems.toArray()), label));
dataString.append(",");
i++;
}
if (!org.apache.commons.collections.MapUtils.isEmpty(thresholdDataWithLabel)) {
int j = 0;
for (Map.Entry<String, List<XYDataItem>> entry : thresholdDataWithLabel.entrySet()) {
String label = entry.getKey();
List<XYDataItem> dataItems = entry.getValue();
dataString.append(String.format(
"{data: %s, label: '%s' , points: {show: false} , lines:{lineWidth: 3 }}",
Arrays.toString(dataItems.toArray()), label));
if (j < thresholdDataWithLabel.size() - 1) {
dataString.append(",");
}
j++;
}
}
dataString.append("]");
config.put("data", new JSONArray(dataString.toString()));
JSONObject options = new JSONObject();
options = flotrChart.getOptions();
options.put("HtmlText", false);
JSONObject mouse = new JSONObject();
mouse.put("track", true);
mouse.put("trackFormatter", new JSONLiteral("dateFormatter(obj)").toString());
options.put("mouse", mouse);
config.put("options", options);
logger.debug("## config : " + config.toString());
}
/**
* @return the startTime
*/
public Date getStartTime() {
return startTime;
}
/**
* @param startTime
* the startTime to set
*/
public void setStartTime(Date startTime) {
this.startTime = startTime;
}
}
mymouseeventhandler.js:
function dateTracker(obj){
var dateToDisplay = new Date(parseInt(obj.x));
var fullYear = dateToDisplay.getFullYear();
var month = dateToDisplay.getMonth();
var date = dateToDisplay.getDate();
return '('+fullYear+'-'+month+'-'+date+' , '+obj.y+')';
}
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
由于创建 JSONObject 时添加了双引号 "",因此该函数无法很好地识别。这是避免双引号的解决方案:
我希望它对其他人有帮助:)
The function is not well recognized because of double quote "" added when creating JSONObject. Here is a solution to avoid double quote :
I hope it will help someone else :)