从Ajax请求中使用Json_encoded数组重绘Chart.js图表

Question

我有一个使用chart.js库绘制的图表。 第一次绘制非常顺利，但是我尝试使用ajax调用中的NEW数据重绘甜甜圈图。

我正在使用PHP和Codeigniter捕获我需要的所有数据，并返回json_encoded数组以重绘该图。 但是，如果我从控制台复制返回的代码并将其粘贴到它中，它就不能与我当前的代码一起使用，很好！ 有人知道为什么吗？ 我也尝试过JSON_FORCE_OBJECT并且它不起作用...

这是我的控制器代码...

$data = array();
  foreach($g_data as $gd) {
    $temp = array(
        'value' => $gd['count'],
        'color' => $this->App_model->adjustBrightness($base_color),
        'label' => $gd['label']
    );
    array_push($data, $temp);
  }

  echo json_encode($data);

这是我的JS ...

$.ajax({
     type: "POST",
     url: siteUrl + "app/load_graph",
     data: {
      question_id: question_id
     },
     success: function(data) {

        //Get context with jQuery - using jQuery's .get() method.
        var ctx = $("#analytics-graph").get(0).getContext("2d");
        //This will get the first returned node in the jQuery collection.
        var myNewChart = new Chart(ctx);

        new Chart(ctx).Doughnut(data);

    } 
  });

这是我的php请求输出到控制台的内容：

[{"value":3,"color":"#64ff9d","label":"less than 1"},{"value":0,"color":"#63ff9c","label":"2"},{"value":0,"color":"#71ffaa","label":"3"},{"value":0,"color":"#74ffad","label":"4"},{"value":2,"color":"#57ff90","label":"5"},{"value":0,"color":"#7cffb5","label":"6+"}]

而这就是让我感到困惑的事情，如果我复制上面返回的对象并将其用作代码中的变量，则效果很好！ 不知道为什么...

$.ajax({
     type: "POST",
     url: siteUrl + "app/load_graph",
     data: {
      question_id: question_id
     },
     success: function(data) {

        //Get context with jQuery - using jQuery's .get() method.
        var ctx = $("#analytics-graph").get(0).getContext("2d");
        //This will get the first returned node in the jQuery collection.
        var myNewChart = new Chart(ctx);

        var data = [{"value":3,"color":"#64ff9d","label":"less than 1"},{"value":0,"color":"#63ff9c","label":"2"},{"value":0,"color":"#71ffaa","label":"3"},{"value":0,"color":"#74ffad","label":"4"},{"value":2,"color":"#57ff90","label":"5"},{"value":0,"color":"#7cffb5","label":"6+"}]

        new Chart(ctx).Doughnut(data);

    } 
  });

Answer 1

我是个白痴，只需要在jquery ajax函数中使用“ json”类型，这个问题可能对其他人很有用，所以这是它的解决方法：dataType：“ json”，

$.ajax({
     type: "POST",
     dataType: "json",
     url: siteUrl + "app/load_graph",
     data: {
      question_id: question_id
     },
     success: function(data) {

        //Get context with jQuery - using jQuery's .get() method.
        var ctx = $("#analytics-graph").get(0).getContext("2d");
        //This will get the first returned node in the jQuery collection.
        var myNewChart = new Chart(ctx);

        new Chart(ctx).Doughnut(data);

    } 
  });
});