Question

我有一张图表可以在/charts/chart1路径上加载。为了将图表的长加载时间与网页的其余部分分开，我使用Ajax加载图表。这是我正在使用的代码：

$(function() {
  $.ajax({
    type: 'GET',
    url: '/charts/chart1',
    success: function(response) {
      $('#firstChart').append(response);
    }
  });
});

但是，图表未加载到#firstChart <div>。 div的实际/charts/chart1的ID为#chart1。

我尝试通过添加以下代码重新加载图表：

chart1 = $('#chart1');
options = chart1.highcharts().options;
chart1 = new Highcharts.chart(options);

在/charts/chart1的控制台中运行此代码时，我会重新加载完全相同的图表。但是，当在进行Ajax调用的页面上运行此命令时，我收到错误Uncaught TypeError: chart1.highcharts is not a function。此外，控制台中的Highcharts.charts返回一个空数组，这意味着不会使用Ajax请求提取图表。

为什么在转到/charts/chart1时图表加载正常，但是在通过Ajax加载时图表没有加载？

Answer 1

确保在发出AJAX请求的页面上加载了Highcharts库。您不需要在/charts/chart1上加载Highcharts，除非您希望将该页面单独使用。 /charts/chart1需要提供的重要事项是$('#chart1').highcharts({ ... });内的数据，它将告诉Highcharts库如何在发出AJAX请求的页面上呈现图表。

事实上，在/charts/chart1和发出AJAX请求的页面上加载Highcharts库可能会给你Highcharts Error #16因为Highcharts被多次加载。

否则你的AJAX功能是正确的，我能够通过示例Highchart让它在localhost上工作。如果您仍有问题，请仔细检查您的/charts/chart1路径是否确实将Highcharts数据返回到请求页面。

使用Ajax将HighCharts渲染时为什么不渲染？

1 个答案: