javascript - 使用 setData() 函数从 JSON 字符串设置 HighCharts 数据

Question

我尝试使用成功的 ajax 响应中的数据使用 setData() 方法更新 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 控制台显示对象 {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'}");

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

希望其中一些有帮助:)