Question

我正在编写一个脚本，以便能够从外部php文件调用我的图表数据。

我试过手动将数据放入图表中，它完全正常。

但是当我执行ajax调用以获取数据时，我收到以下错误 -

`未捕获的TypeError：对象
    [{“key”：“O2”，“values”：[{“x”：“NRW”，“y”：1}，{“x”：“WRW     “，”y“：3}]}，{”key“：”O1“，”values“：[{”x“：”ME“，”y“：1}，{”x“：”FST     “，”y“：1}，{”x“：”SRW“，”y“：1}，{”x“：”LRW     “，”y“：4}]}，{”key“：”O3“，”values“：[{”x“：”SEDG“，”y“：1}，{”x“：”DLDW     “，”y“：1}，{”x“：”SM“，”y“：1}，{”x“：”DEDDN“，”y“：1}，{”x“：”LEEW     “，”y“：3}]}，{”key“：”O4“，”values“：[{”x“：”BUEC“，”y“：2}]}];


没有方法'map'`

以下是我的网页代码的一部分 -

<script> 

        var update = function() {


        var jsonData = $.ajax({
        url: "http://localhost/getData.php",
        async: false
        }).responseText;




        var chart;
        nv.addGraph(function() {
        chart = nv.models.multiBarChart()
        .color(d3.scale.category10().range())
        .rotateLabels(0)      //Angle to rotate x-axis labels.
        .transitionDuration(250)
        .showControls(false)   //Allow user to switch between 'Grouped' and 'Stacked' mode.
        .groupSpacing(0.24)    //Distance between each group of bars.

        ;

        chart.reduceXTicks(false).staggerLabels(true).groupSpacing(0.3);

        chart.x (function(d) { return d.x; })


        chart.yAxis
        .tickFormat(d3.format(',.1f'))
        .axisLabel('Defect Count')
        .axisLabelDistance(40);

        d3.select('#chart1M svg')
        .datum(jsonData)
        .call(chart);

        return chart;     
        });
        };

</script>

任何帮助非常感谢

Answer 1

正如@bart_s在评论中所说，你的JSON无效（如果不应以分号结尾）。这是检查JSON的便捷工具：http://jsonlint.com/。

那样，你有更大的问题。当d3提供更好的通话方式时，为什么使用jQuery的$.ajax？为什么你的ajax调用是同步的？此外，除非您确实需要，否则不应在AJAX调用中使用绝对URL。部署此时，http://localhost位将失败。

以下是我写这个的方法：

d3.json("getData.php", function(jsonData) {  // assuming getData.php is served out of the same directory as the javascript

  var chart;
  nv.addGraph(function() {
    chart = nv.models.multiBarChart()
      .color(d3.scale.category10().range())
      .rotateLabels(0) //Angle to rotate x-axis labels.
    .transitionDuration(250)
      .showControls(false) //Allow user to switch between 'Grouped' and 'Stacked' mode.
    .groupSpacing(0.24) //Distance between each group of bars.

    ;

    chart.reduceXTicks(false).staggerLabels(true).groupSpacing(0.3);

    chart.x(function(d) {
      return d.x;
    })


    chart.yAxis
      .tickFormat(d3.format(',.1f'))
      .axisLabel('Defect Count')
      .axisLabelDistance(40);

    d3.select('#chart1M svg')
      .datum(jsonData)
      .call(chart);

    return chart;
  });

});

示例here。

AJAX和NVD3.JS未捕获的对象错误令人讨厌的问题

1 个答案: