javascript - 如何通过ajax在Js图表中设置值？

Question

我正在尝试通过ajax显示数据，但我在JS图中遇到问题。我确定如何在图形函数中显示值。我现在得到了正确的响应，我必须将值放入下面的图表中，这是 Js 图表，也是 ajax 响应和我试图放入值的变量

var percentage1=0;
var remaining1=0;
var standard1=0;
var tuned1=0;

FusionCharts.ready(function(){
var 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响应，其中我有4个值，我试图将它们放入上面的图表中

success: function(result){
      alert(result);
      percentage1=jObj['percentage1'];                   
      remaining1=jObj['remaining1'];         
      standard1=jObj['standard1'];
      tuned1=jObj['tuned1'];

      $('#chart-container').updateFusionCharts();
      alert(percentage1+" "+remaining1+" "+standard1+" "+tuned1);

    },
// I get all the 4 values in result

如果有人可以帮助我解决这个问题，那就太好了

Answer 1

您需要在 AJAX 调用后创建新的数据源，并使用 FusionCharts 支持的 setJSONData API 方法设置数据源。

 var chartData=null;
 $(function(){
        $.ajax({
           async: false,

       url: 'newData.json', 
           type: 'GET',
      dataType: 'json',
           success:function(data){
              chartData = data;


           },
           error:function(){
              $('#traveldatachart-agency').html('<b><font color="red">Error loading data...</font></b>');
           }

       })




})

FusionCharts.ready(function () {
  console.log(chartData);
    var revenueChart = new FusionCharts({
    type: 'doughnut2d',
    renderAt: 'chart-container',
    width: '550',
    height: '350',
    dataFormat: 'json',
    dataSource: {
      "chart": {
        "caption": "Split of Revenue by Product Categories",
        "subCaption": "Last year",
        "numberPrefix": "$",
        "startingAngle": "310",
        "defaultCenterLabel": "Total revenue: $64.08K",
        "centerLabel": "Revenue from $label: $value",
        "centerLabelBold": "1",
        "showTooltip": "0",
        "decimals": "0",
        "theme": "fusion"
      },
      "data": [{
          "label": "Food",
          "value": "8504"
        },
        {
          "label": "Apparels",
          "value": "4633"
        },
        {
          "label": "Electronics",
          "value": "2507"
        },
        {
          "label": "Household",
          "value": "1910"
        }
      ]
    }
  }).render();
    $("#btn").on('click',function(){

      FusionCharts.items["chartobject-1"].setJSONData(chartData);
    });
});