从 ajax 请求使用 Json_encode 数组重绘 Chart.js 图表答案

【问题标题】：Redraw Chart.js Chart with Json_encoded array from ajax request从 ajax 请求使用 Json_encode 数组重绘 Chart.js 图表
【发布时间】：2014-02-14 03:29:05
【问题描述】：

我有一个使用 chart.js 库绘制的图表。第一次绘制很完美，但我正在尝试使用来自 ajax 调用的新数据重新绘制圆环图。

我正在使用 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);

    } 
  });

【问题讨论】：

标签： javascript php jquery json chart.js

【解决方案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);

    } 
  });
});

【讨论】：