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

Passing a javascript variable into a fusion chart constructor

本文关键字:构造函数 融合 javascript 变量      更新时间:2023-09-26

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

我试过JSON。Stringify,这个。,以及一些其他方法。我在fusion chart网站上找不到任何用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();
});

我想我得到了你所希望的。我使用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