Question

除了在图表中加载数据外，一切正常。当我查看页面源时，它显示ajaxData而不是变量包含的数据数组。

我已尝试过JSON.Stringify，这个以及其他一些方法。我无法在融合图表网站上找到使用AJAX加载数据的任何示例，他们的所有示例都涉及将javascript放在服务器端代码（如PHP）中，这是我应该避免的。我只想用ajax加载数据并将其转储到图表中。

$.ajax($assetsSearchUrl, {
        dataType: "text",
        accepts: {text: "application/json"},
        success: loadChart
    });

function loadChart(ajaxData)
{        

    var ageGroupChart = new FusionCharts({
        type: 'pie2d',
        renderAt: 'chartId',
        width: '400',
        height: '275',
        dataFormat: 'json',
        theme: 'ocean',
        dataSource: {
            "chart": {
                "caption": "Assets",
                ....
                "showLegend": "0"
        },
        data : ajaxData
    }
}).render();
}

没有动态数据的工作示例。

FusionCharts.ready(function () {
var ageGroupChart = new FusionCharts({
    type: 'pie2d',
    renderAt: 'chart-container',
    width: '450',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Split of Visitors by Age Group",
            ....
            "legendItemFontColor": '#666666'
        },
        "data": [
            {
                "label": "Teenage",
                "value": "1250400"
            }, 
            {
                "label": "Senior",
                "value": "491000"
            }
        ]
    }
}).render();
});

Answer 1

我想我有你所希望的。我使用JSON.parse将json文件字符串转换为对象，不需要PHP。希望这有帮助！

var jsonUrl = "https://api.myjson.com/bins/1jq6x";

FusionCharts.ready(function() {

  $.ajax(jsonUrl, {
    dataType: "text",
    accepts: {
      text: "application/json"
    },
    success: loadChart
  });

  function loadChart(jsonString) {
    var ageGroupChart = new FusionCharts({
      type: 'pie2d',
      renderAt: 'chart-container',
      width: '450',
      height: '300',
      dataFormat: 'json',
      dataSource: {
        "chart": {
          "caption": "Split of Visitors by Age Group",
          "legendItemFontColor": '#666666'
        },
        "data": JSON.parse(jsonString)
      }
    }).render();
  }
});

JSFiddle

将javascript变量传递给融合图构造函数

1 个答案: