具有自定义json响应的Highcharts系列数据

Highcharts series data with custom json response

本文关键字：Highcharts 系列 数据 响应 自定义 json      更新时间：2023-09-26

一旦调用提交按钮，就会动态构建此图表。图表使用正确的系列名称进行渲染，但不显示任何行。我在我的Highcharts图表中有一个$.get调用，如下所示：

series: [           
    <% {"WEB1" => Farm.WEB,
        "CAT1" => Farm.CAT,
        "ELK1" => Farm.ELK,
           }.each do |name, farm| %>
    {
    name: "<%= name %>",
    pointInterval: <%= 1.day * 1000 %>,
    pointStart: document.forms["myform"]["from"].value,
    data: $.get("/farm/1", {
        scope: "<%= name %>", 
        from: document.forms["myform"]["from"].value, 
        to: document.forms["myform"]["to"].value 
        }
          })
    },
    <% end %>]

其设计用于返回此自定义json哈希：

[{"x":"2012-07-10T17:00:00Z","y":0.015}]

这一切都有效。get返回正确的散列。但Highcharts不喜欢这样。有人对我如何正确格式化有什么建议吗？提前感谢！

编辑

这就是我的想法。。但它不起作用。。

 function(data){
        var arr = new Array();
            $.each(data, function(index,obj) {
               arr.push(obj.y);
       });setData(arr);

你只是做错了。ajax不是这样工作的。AJAX是异步的，因此不返回任何内容，而是进行回调。

data: $.get(...)

问题是，$.get不会立即返回任何内容，但也不会阻止或中断js处理，因此浏览器会继续执行下一个js块，甚至在ajax调用完成之前。

这就是你通常的做法。你首先进行$.get调用，完成后创建图表。

$.get("/farm/1", {
    scope: "<%= name %>", 
    from: document.forms["myform"]["from"].value, 
    to: document.forms["myform"]["to"].value 
    },function(data){
          // use the data that was received to build the highchart
          chart=....
      }
});

http://api.jquery.com/jQuery.get/

相关文章：