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发送请求。下面是我的尝试，但这是有缺陷的，因为图表现在甚至不会显示点击＆＃39; chart1＆＃39;按钮。图表确实出现了，但是空了：

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

在按钮单击

1 个答案: