amcharts - 加载 ajax 数据

Posted 2023-05-07

【中文标题】amcharts - 加载 ajax 数据

【英文标题】：amcharts - load ajax data

【发布时间】：2015-09-07 21:39:29

【问题描述】：

我正在使用 AMcharts 来显示我的 Web 服务器返回的 JSON 数据。我正在考虑使用像

这样的选项

chart.dataProvider : getData()  ... ,

在这里，我将进行 ajax 调用并返回服务器发送的任何数据。但是ajax调用是异步的，我不知道如何将成功函数的响应数据提供给图表。

我打算通过提供如下所示的 url 选项来使用 dataLoader 插件..

"dataLoader" : 
    "url": "my_server_url"
    ...

但是这种方法对我不起作用，因为我必须向我的网络服务器发送一些额外的身份验证标头，这可以在我自己的 ajax 调用中完成。

DataLoader 插件的 ajax 请求在发送回调之前似乎没有触发我的全局 ajax，所以我无法挂钩它以发送身份验证令牌。

这里有任何帮助...

【问题讨论】：

我想最快的方法是仅在异步 AJAX 加载完成后开始初始化图表。另一种方法是等待 Data Loader 插件的更新出现，该插件实现了身份验证或允许在将请求发送到服务器之前对其进行修改。 （我在 amCharts 工作，我会将这个绝妙的想法转发给开发团队）

我认为，如果 AMCharts 可以支持可覆盖的 ajax 调用，类似于 Backbone.js 的做法，那将非常有用。

只是为了确保，如果有一个选项可以在打开 XMLHttpRequest 对象之前通过一些自定义回调函数传递它，这对你来说就足够了吗？

我认为这应该会有所帮助。在您的代码触发回调后，调用的回调 fn 可以修改 xmlhttprequest 以添加额外的标头或更改一些数据参数。

【参考方案1】：

根据@martynasma 所说的，这是一个对我有用的示例代码 sn-p...

    return jQuery.ajax(
      type: 'GET',
      contentType: 'application/json; charset=utf-8',
      dataType: 'json',
      url: 'https://www.example.com/endpoint', //replace with your endpoint url
      beforeSend: function(xhr) 
        // Add your parameters here
      ,
    )
    .done( function( data ) 
      // Create the chart with data
      var chart = am4core.create( 'chartdiv', am4charts.PieChart );
      chart.data = data;

      // Add and configure Series
      var pieSeries = chart.series.push(new am4charts.PieSeries());
      pieSeries.dataFields.value = "liters";
      pieSeries.dataFields.category = "country";
    )
    .fail( function ( err ) 
      console.log( err );
    )
  
  
  create_chart();