javascript - 从 PHP 获取 json 数据到我的 JavaScript 中以进行 float

Question

如果这是错误的地方，我深表歉意。

我有一个返回以下内容的 php 脚本:

[{"label":"0","data":"261"},{"label":"1653","data":"1"},{"label":"1654","data":"6"},{"label":"1655","data":"2"},{"label":"1656","data":"10"},{"label":"1657","data":"5"},{"label":"1658","data":"4"},{"label":"1659","data":"10"},{"label":"1660","data":"5"},{"label":"1661","data":"3"}]

我想从我的 javascript(然后从我的 html 文件调用)调用此 php 脚本以使用 flot 绘制图表。

php 脚本似乎按计划工作以创建上述输出。

但我似乎无法在我的 JavaScript 中将上述数据正确分配给变量。你能告诉我我做错了什么吗？我想将 php 的输出分配给一个名为 tan 的变量，然后将其用作 flot 饼图的来源。

var tan = Null
$.ajax({
  url:"http://myurl/chartdata2.php",
  type:"POST",
  dataType: "json",
  async:false,
 // data:{accountid:Account},
  success:function(d){
    tan = d;
  }
});

然后调用我的 flot 函数:

  $("#flot-pie-donut").length && $.plot($("#flot-pie-donut"), tan, {
    series: {
      pie: {
        innerRadius: 0.4,
        show: true,
        stroke: {
          width: 0
        },
        label: {
          show: true,
          threshold: 0.05
        },

      }
    },
    colors: ["#65b5c2","#4da7c1","#3993bb","#2e7bad","#23649e"],
    grid: {
        hoverable: true,
        clickable: false
    },
    tooltip: true,
    tooltipOpts: {
      content: "%s: %p.0%"
    }
  });

谢谢!

Answer 1

我假设您已成功从 ajax 调用中获取数据。所以我猜这是你的 data formatting problem before it being passed into flot

试试这个:

var tan = Null
$.ajax({
  url:"http://myurl/chartdata2.php",
  type:"POST",
  dataType: "json",
  async:false,
 // data:{accountid:Account},
  success:function(d){
    tan = d;
    process(tan);
  }
});

var _tan = [];
function process(tan){

    for (var i = 0; i < tan.length; i++){

          // format the data array into [label,data]
          _tan.push([tan[i].label,tan[i].data]);
    }
}

然后在你的 jflot 中:

$("#flot-pie-donut").length && $.plot($("#flot-pie-donut"), _tan, {
series: {
  pie: {
    innerRadius: 0.4,
    show: true,
    stroke: {
      width: 0
    },
    label: {
      show: true,
      threshold: 0.05
    },

  }
},
colors: ["#65b5c2","#4da7c1","#3993bb","#2e7bad","#23649e"],
grid: {
    hoverable: true,
    clickable: false
},
tooltip: true,
tooltipOpts: {
  content: "%s: %p.0%"
}
});