挂毯chenillekit图:定义的trackFormatter函数的问题
|
我需要帮助以在挂毯页面中显示图表。我正在使用Tapestry 5.2.4和chenillekit 1.3.0。
我的问题是我想定义一个自定义javascript函数以在鼠标轨道中显示日期。 Flotr的选项是trackFormatter:function(obj){...}。
就我而言,我使用JSON发送图表选项。
调用该函数时,出现如下错误:
\“ n.mouse.trackFormatter不是一个函数\”对于Firefox,
对于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+\')\';
}
没有找到相关结果
已邀请:
1 个回复
琳娘
我希望它会帮助别人:)