为什么HighCharts在使用Ajax进行渲染时不渲染？ [英] Why doesn't HighCharts render when I pull it in with Ajax?

问题描述

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

  $（function（）{
 $ .ajax（{
类型：'GET'，
 url：'/ charts / chart1'，
成功：函数（响应）{
 $（'＃firstChart'）。append（response）; 
} 
}）; 
}）; 
  

但是，图表并未加载到 #firstChart < div> 。在 / charts / chart1 中实际的 div 的id是＃chart1 。

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

  chart1 = $（'＃chart1'）; 
 options = chart1.highcharts（）。options; 
 chart1 =新建Highcharts.chart（选项）; 
  

在 / charts / chart1 ，我重新载入完全相同的图表。但是，在进行Ajax调用的页面上运行时，出现 Uncaught TypeError错误：chart1.highcharts不是函数。另外，控制台中的 Highcharts.charts 会返回一个空数组，这意味着图表不会被Ajax请求拖动。

为什么图表在加载到 / charts / chart1 时没有问题，但图表无法加载通过Ajax加载？

解决方案

确保您的Highcharts库正在加载发出AJAX请求的页面。您不需要在 / charts / chart1 上加载Highcharts，除非您希望使该页面可单独使用。 / charts / chart1 需要提供的重要内容是 $（'＃chart1'）中的数据。 将告诉Highcharts图书馆如何在发出AJAX请求的页面上呈现图表。

实际上，在两个图表上加载Highcharts库 / charts / chart1 并且在发出AJAX请求的页面上可能会给你 Highcharts Error＃16 因为Highcharts被多次加载。

否则你的AJAX函数是正确的，并且我能够使它工作在本地主机上给我一个示例Highchart。如果您仍有问题，请仔细检查您的 / charts / chart1 路径是否确实会将Highcharts数据返回到请求页面。

I have a chart that loads just fine at the path /charts/chart1. To separate the long load times of the chart with the rest of the webpage, I'm using Ajax to load in the chart. Here's the code I'm using:

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

However, the chart is not loaded in to the #firstChart <div>. The id of the actual div at /charts/chart1 is #chart1.

I've tried reloading the chart by adding the following code:

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

When running this code in the console on /charts/chart1, I reload the exact same chart. However, when running this on on the page that made the Ajax call, I get the error Uncaught TypeError: chart1.highcharts is not a function. Also, Highcharts.charts in the console returns an empty array, meaning the chart is not being pulled with the Ajax request.

Why does the chart load fine when going to /charts/chart1, but the chart doesn't load when loading via Ajax?

解决方案

Make sure that your Highcharts library is being loaded on the page making the AJAX request. You don't need to load Highcharts on /charts/chart1 unless you are looking to also make that page available to stand alone. The important thing /charts/chart1 needs to supply is the data inside $('#chart1').highcharts({ ... }); that will tell the Highcharts library how to render your chart on the page making the AJAX request.

In fact, loading the Highcharts library on both /charts/chart1 and on the page making the AJAX request will probably give you Highcharts Error #16 because Highcharts is being loaded multiple times.

Otherwise your AJAX function is correct, and I was able to make it work for me on localhost with an example Highchart. If you still have issues, double check that your /charts/chart1 path really does return the Highcharts data to the requesting page.

这篇关于为什么HighCharts在使用Ajax进行渲染时不渲染？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！