如何通过Ajax为FusionCharts环形图设置数据值？

看起来你已经成功拿到Ajax返回的数据了，但问题出在你只是更新了全局变量，却没有把新数据同步到图表的数据源里，而且updateFusionCharts()并不是FusionCharts用来更新数据的正确方法。下面是具体的修复步骤：

第一步：让图表实例在Ajax回调中可访问 #

首先要把图表实例变量提升到全局作用域，这样Ajax的成功回调才能拿到它：

// 全局声明变量，确保回调能访问
var percentage1 = 0; 
var remaining1 = 0; 
var standard1 = 0; 
var tuned1 = 0;
var fusioncharts; // 全局存储图表实例

FusionCharts.ready(function(){ 
  fusioncharts = new FusionCharts({ 
    type: 'doughnut2d', 
    renderAt: 'chart-container', 
    width: '450', 
    height: '350', 
    dataFormat: 'json', 
    dataSource: { 
      "chart": { 
        "caption": "", 
        "showBorder": "0", 
        "use3DLighting": "0", 
        "enableSmartLabels": "0", 
        "startingAngle": "0", 
        "showLabels": "0", 
        "showPercentValues": "1", 
        "showLegend": "1", 
        "defaultCenterLabel": percentage1, 
        "centerLabel": " $label", 
        "centerLabelBold": "1", 
        "showTooltip": "0", 
        "decimals": "0", 
        "useDataPlotColorForLabels": "1", 
        "theme": "fint" 
      }, 
      "data": [
        { 
          "label": "Standard Power "+standard1, 
          "value": percentage1 
        }, 
        { 
          "label": "Stage 1 Power "+tuned1, 
          "value": remaining1 
        }
      ] 
    } 
  }); 
  fusioncharts.render(); 
});

第二步：在Ajax回调中更新图表数据源 #

拿到新数据后，你需要重新构建完整的数据源对象，然后调用FusionCharts的setJSONData()方法来更新图表：

success: function(result){ 
  alert(result); 
  // 注意：如果返回的result是JSON字符串，需要先解析成对象
  var jObj = JSON.parse(result); 
  percentage1 = jObj['percentage1']; 
  remaining1 = jObj['remaining1']; 
  standard1 = jObj['standard1']; 
  tuned1 = jObj['tuned1']; 

  // 用新数据构建新的数据源
  var newDataSource = {
    "chart": { 
      "caption": "", 
      "showBorder": "0", 
      "use3DLighting": "0", 
      "enableSmartLabels": "0", 
      "startingAngle": "0", 
      "showLabels": "0", 
      "showPercentValues": "1", 
      "showLegend": "1", 
      "defaultCenterLabel": percentage1, 
      "centerLabel": " $label", 
      "centerLabelBold": "1", 
      "showTooltip": "0", 
      "decimals": "0", 
      "useDataPlotColorForLabels": "1", 
      "theme": "fint" 
    }, 
    "data": [
      { 
        "label": "Standard Power "+standard1, 
        "value": percentage1 
      }, 
      { 
        "label": "Stage 1 Power "+tuned1, 
        "value": remaining1 
      }
    ]
  };

  // 调用官方方法更新图表数据
  fusioncharts.setJSONData(newDataSource);

  alert(percentage1+" "+remaining1+" "+standard1+" "+tuned1); 
},

关键说明 #

1. 图表实例的访问权限：如果不把fusioncharts变量全局化，Ajax回调里拿不到这个实例，也就没法更新它
2. 数据源的同步：图表初始化时是把变量的初始值复制到了数据源里，后续变量变化不会自动同步，必须手动构建新的数据源并传给图表
3. 正确的更新方法：setJSONData()是FusionCharts官方提供的更新JSON数据源的方法，updateFusionCharts()并不是用来更新数据的标准API
4. JSON解析：如果你的Ajax返回的是字符串格式的JSON，一定要用JSON.parse()解析成对象，否则jObj会是undefined，导致拿不到数据

内容的提问来源于stack exchange，提问作者david