Tapestry Cheillekit Chart:定义轨道格式化程序函数的问题

Question

>我需要帮助才能在挂毯页面中显示图表。我正在使用挂毯 5.2.4 和雪尼勒基特 1.3.0。我的问题是我想定义一个自定义 javascript 函数来在鼠标轨道中显示日期。Flotr 的选项是 trackFormatter ： function（obj）{...}。就我而言，我使用 JSON 发送图形选项。调用函数时，我有这样的错误：

"n.mouse.trackFormatter 不是 Firefox 的函数"，

"未捕获的类型错误：对象 # 的属性'跟踪格式化程序'不是函数"对于 chrome。

是否有人有同样的问题和/或找到解决方案来维护自定义JavaScript函数，如跟踪格式化程序？ 谢谢！

我的代码：

...
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+')'; 
}

Answer 1

由于在创建 JSONObject 时添加了双引号 "，因此无法很好地识别该函数。这是避免双引号的解决方案：

...
mouse.put("trackFormatter", new JSONLiteral(
(""function(obj){ return dateTracker(obj) }"").replace(""", "")));
...

我希望它能帮助其他人:)