Question

我尝试使用setData()方法使用来自成功的ajax响应的数据更新HighCharts：

$.ajax({
    type: "POST",
    url: "createHighChartsContent.do",
    data: "document=Test",
    success: function(data) {           
        data = JSON.parse(data);
        console.log(data);
        $("#chart01").highcharts().series[0].setData([data]);
    }
});


<div style="font-size: 2px; font-family: Verdana; margin-bottom:0px;">  
    <div id="chart01" style="height: 732px; margin: 0 auto"></div>   
</div>

创建响应的servlet如下所示：

protected void doGet(final HttpServletRequest req, final HttpServletResponse resp) {    
        String json = new Gson().toJson("{x:1406199133117,y:5,name:'Test'}");
        try {
            resp.getWriter().write(json);
        } catch (IOException e) {
            e.printStackTrace();
        }
}

问题：

HighChart实例未更新。

如果我尝试手动设置ajax响应中的数据：

$j("#chart01").highcharts().series[0].setData([{x:1406199133117,y:5,name:'Test'}])

它的工作方式与预期一致。

这里有什么问题？

修改

所以，是的，JSON字符串无效。我尝试使用SteveP更改，但它不起作用。

我认为主要问题是setData（）需要一个具有有效JavaScript OBJECT 的数组。

以下代码正在运行：

var s = {x:1406199133117,y:5,name:'Test'};
console.log(s);
var arr = [];
arr.push(s);
$("#chart01").highcharts().series[0].setData(arr);

JavaScript控制台显示Object {x: 1406199133117, y: 5, name: "Test"}

我没有让它从ajax数据响应中创建这样的对象。

HighChart以这种方式创建：

$("#chart01").highcharts({
       chart: {
          //renderTo: "chart01",
          type: 'bar'
       },
       title: {
         text: ''
       },
       xAxis: {
          type: 'datetime',
          dateTimeLabelFormats: {
             week: '%e. %b %Y'   
          },
          offset: 10,
          maxZoom: 7 * 24 * 3600000 // seven days
       },
       yAxis: {
          title: {              
             text: 'Defects Count'              
          },
          minTickInterval: 1
       },
       plotOptions: {
          series: {
             stacking: 'normal'
          }              
       },
       series: [              
            { name:'Test', data: [] }
       ]
    });

Answer 1

我不能100％确定这里出了什么问题，但有一些我关注的事情。

首先，您的JSON无效。应引用x，y和名称：

{ "x": 1406199133117, "y": 5, "name": "Test" }

我很担心：

String json = new Gson().toJson("{x:1406199133117,y:5,name:'Test'}");

为什么不简单地写字符串？

resp.getWriter().write("{\"x\":1406199133117,\"y\":5,\"name\":'Test'}");

最后，我会返回整个数组，包括[]大括号，而不是在客户端中添加它们。

希望其中一些有用：）

使用setData（）函数从JSON字符串设置HighCharts数据

1 个答案: