Highchart 显示为空，直到单击按钮

Question

我一直在自定义以下 jsfiddle 以显示数据库中的数据。 http://jsfiddle.net/jlbriggs/7ntyzo6u/

我正在使用 JSON 来检索数据库中的数据。在 jsfiddle 中，有 3 个图表可以通过单击按钮在它们之间切换。但是当您加载页面时，chart1 是默认显示的图表。现在我已经编辑了 chart1 以便它显示我的数据库数据：

var chart,
  chartOptions = {},
  chartData = {};

chartData.chart2 = randomData(10, true);
chartData.chart3 = randomData(65, true, 300);

chartOptions.chart1 = {
  chart: {
    type: 'column'
  },
  title: {
    text: 'Chart 1 Title'
  },
  xAxis: {
    categories: []
  },
  yAxis: {
    title: {
      text: 'Chart 1<br/>Y Axis'
    }
  },
  series: [{
    name: 'Chart 1 Series',
    data: []
  }]
};
var tableName = '<?php echo $tableName; ?>'
$.getJSON("../../companies/charts/Data.php", {id: escape(tableName)}, function(json) {
    chartOptions.chart1.xAxis.categories = json[0]['data'];
    chartOptions.chart1.series[0].data = json[6]['data'];
});

我的问题是，加载页面后图表显示为空。只有当我单击chart1 按钮时才会显示数据。谁能告诉我这是否是因为在上面的代码中设置 xAxis 和系列数据后我遗漏了一些东西？

由于 $.getJSON 是异步的（请参阅下面的评论），我现在尝试使用 ajax 来发送请求。下面是我的尝试，但这是有缺陷的，因为图表现在甚至不会在单击“chart1”按钮时显示数据。图表确实出现了，但为空：

chartOptions.chart1 = {
  chart: {
    type: 'column'
  },
  title: {
    text: 'Chart 1 Title'
  },
  xAxis: {
    categories: []
  },
  yAxis: {
    title: {
      text: 'Chart 1<br/>Y Axis'
    }
  },
  series: [{
    name: 'Chart 1 Series',
    data: []
  }]
};
var tableName = '<?php echo $tableName; ?>'
$.ajax({
  url: "../../companies/charts/Data.php",
  data: {id: escape(tableName)},
  dataType: "json",
  async: false,
  succes: function(data) {
  chartOptions.chart1.xAxis.categories = json[0]['data'];
  chartOptions.chart1.series[0].data = json[6]['data'];
  }
});

提前感谢您的帮助！

Answer 1

我的假设是，由于$.getJSON 是异步的，因此在填充数据之前已经加载了图表。 您可以尝试在 $.getJSON 块内的系列上调用 setData 方法。这将强制重绘图表：

chartOptions.chart1.series[0].setData(json[6]['data'],true);

或者尝试使用$.ajax 和async:false 发送请求。将以下块替换为$.getJSON 块。

$.ajax({
  url: "../../companies/charts/Data.php",
  data: {id: escape(tableName)},
  async:false
}).done(function() {
  chartOptions.chart1.xAxis.categories = json[0]['data'];
  chartOptions.chart1.series[0].data = json[6]['data'];
});

我认为这应该让你继续前进。

在此处了解更多信息：jQuery.ajax