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

Question

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

我试过 JSON.Stringify、这个和其他一些方法。我在使用 AJAX 加载数据的融合图表网站上找不到任何示例，他们所有的示例都涉及将 javascript 放在服务器端代码中，例如 PHP，这是我的东西' d宁愿避免。我只想使用 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 变量传递到融合图构造函数中

Passing a javascript variable into a fusion chart constructor

javascript

jquery

ajax

fusioncharts