如何使用click事件使图表动态化

Question

我有一个barChart，我发送给Servlet的值，并且根据每个值我必须在radarChart上填充一些数据。数据将进入Servlet并且雷达图也来了。但问题是是雷达只为一个条件而来。它不适用于其他部分。结果是不能使雷达和条形图交互。我的代码就是......

这是我将数据发送到Servlet的控制器..

initializedEvents: false,
init: function() {
    this.control({
        '#barColumnChart': {
            afterlayout: this.afterChartLayout
        }
    });
},
afterChartLayout: function(){
    var me=this;
    if(this.initializedEvents==true) return;
    this.initializedEvents=true;
    Ext.getCmp('barColumnChart').series.items[0].on('itemmousedown',function(obj){

        // alert(obj.storeItem.data['source']+ ' &' + obj.storeItem.data['count']);

        var barData=obj.storeItem.data['source']+ ' &' + obj.storeItem.data['count'];
        //alert(barData);
        me.dataBaseCall(obj.storeItem.data['source'],obj.storeItem.data['count']);
    });
},
dataBaseCall: function(source,count){
    //alert(barData);

    Ext.Ajax.request({
        url: "CallRatiosAnalysis",
        success: function(response, opts){
            //do what you want with the response here
            console.log("hiiiiiiiiiiii");
        },
        failure: function(response, opts) {
            alert("server-side failure with status code " + response.status);
        },
        params: {
            source: source,
            count:  count
        }

这是Servlet，雷达图正在形成......

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    String mysource = request.getParameter("source");
    String mycount = request.getParameter("count");

    System.out.println(mysource + "\n" + mycount);

    if (mysource != null && mycount != null) {

        PrintWriter out = response.getWriter();
        response.setContentType("text/html");
        ArrayList<IndCallType> ratios = new ArrayList<IndCallType>();
        ratios.add(new IndCallType("Voice", "40"));
        ratios.add(new IndCallType("SMS", "30"));
        ratios.add(new IndCallType("MMS", "5"));
        ratios.add(new IndCallType("GPRS", "20"));
        ratios.add(new IndCallType("Others", "5"));
        Gson gson = new Gson();
        JsonArray arrayObj = new JsonArray();
        for (int i = 0; i < ratios.size(); i++) {
            IndCallType count = ratios.get(i);
            JsonElement linObj = gson.toJsonTree(count);
            arrayObj.add(linObj);
        }

        JsonObject myObj = new JsonObject();
        myObj.addProperty("success", true);
        myObj.add("allCalls", arrayObj);
        myObj.addProperty("allCallsRatio", ratios.size());

        out.println(myObj.toString());
        out.close();
    }else{ //this part is not working 
        PrintWriter out = response.getWriter();
        response.setContentType("text/html");
        ArrayList<IndCallType> ratios = new ArrayList<IndCallType>();
        ratios.add(new IndCallType("Voice", "10"));
        ratios.add(new IndCallType("SMS", "3"));
        ratios.add(new IndCallType("MMS", "50"));
        ratios.add(new IndCallType("GPRS", "80"));
        ratios.add(new IndCallType("Others", "1"));
        Gson gson = new Gson();
        JsonArray arrayObj = new JsonArray();
        for (int i = 0; i < ratios.size(); i++) {
            IndCallType count = ratios.get(i);
            JsonElement linObj = gson.toJsonTree(count);
            arrayObj.add(linObj);
        }

        JsonObject myObj = new JsonObject();
        myObj.addProperty("success", true);
        myObj.add("allCalls", arrayObj);
        myObj.addProperty("allCallsRatio", ratios.size());

        out.println(myObj.toString());
        out.close();
    }
}

只有一部分，即if条件正在起作用。但是其他部分不起作用。我无法理解原因。有人请帮助我。

Answer 1

假设您已经渲染了雷达图表，并使用配置的商店 url：“CallRatiosAnalysis” 而不是调用Ext.Ajax.request，你应该：

Ext.getCmp(<selector for radar chart>).getStore().load({
    params: {
        source: source,
        count:  count
    }
});

如果不这样做，那么成功回调应该实现图表的渲染，并加载数据。