在 highcharts 中检索 JSON 数据

Question

我一直在尝试定制一个出色的 jsfiddle，我有幸在前面的问题中被引导到这里：Switching between many Highcharts using buttons or link text

我对 javascript 编程（以及 highcharts 也是）非常陌生，我在从数据库中检索自己的数据时遇到了一些困难。目前我已经设置了如下图表：

 $('chart1').ready(function() {
        var options = {
            chart: {
                renderTo: 'chart1',
                type: 'column',
                marginTop: 40,
                marginBottom: 75
            },
            legend: {
                enabled: false
            },
            title: {
                text: 'Revenues',
                x: 25 //center
            },

            xAxis: {
                title: {
                    text: ''
                },
                categories: []
            },
            yAxis: {
                showInLegend: false,
                tickAmount: 11,
                endOnTick: false,
                startOnTick: true,
                labels: {
                    formatter: function () {
                    return Highcharts.numberFormat(this.value, 0, '.', ',');
                                }
                },
                title: {
                    text: '<?php echo $unitCurr; ?>'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            tooltip: {
                formatter: function() {
                        return '<b>'+ this.series.name +'</b><br/>'+
                        this.x +': '+ Highcharts.numberFormat(this.y, 0,'.',',');
                }
            },
            series: []
        }
        var tableName = '<?php echo $tableName; ?>'
        $.getJSON("../../companies/charts/data.php", {id: escape(tableName)}, function(json) {
            options.xAxis.categories = json[0]['data'];
            options.series[0] = json[1];
            chart = new Highcharts.Chart(options);
        });
    });

在底部，您会注意到我正在使用 JSON 从我的数据库中检索信息，并且一切正常。在我之前的问题中，我问的是如何使用按钮切换图表，并被定向到以下 jsfiddle：http://jsfiddle.net/jlbriggs/7ntyzo6u/

此示例包含 3 个图表，但我只是试图操纵第一个图表，以了解是否可以显示我自己的数据而不是生成的随机数据：

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

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

chartOptions.chart1 = {
  chart: {
    type: 'column'
  },
  title: {
    text: 'Chart 1 Title'
  },
  yAxis: {
    title: {
      text: 'Chart 1<br/>Y Axis'
    }
  },
  series: [{
    name: 'Chart 1 Series',
    data: chartData.chart1
  }]
};

但无论我尝试了多少，我似乎都无法更改“数据：chartData.chart1”，使其检索从我的 $.getJSON 函数获得的数组。你们谁能帮我解释一下为什么，例如，下面的代码不起作用？在这里，我尝试将 ChartData.chart1 数组交换为我的数据库数据。我没有足够的经验来判断是代码的整个随机数生成部分阻止它工作还是我的理解严重缺乏。 （我已经确保data.php中的数据确实可用，因为我可以在尝试时将其显示在普通数组中）。

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

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

$.getJSON("../../companies/charts/data.php", {id: escape(tableName)}, function(json) {
    chartData.chart1 = json[6]['data'];
});

    chartOptions.chart1 = {
      chart: {
        type: 'column'
      },
      title: {
        text: 'Chart 1 Title'
      },
      yAxis: {
        title: {
          text: 'Chart 1<br/>Y Axis'
        }
      },
      series: [{
        name: 'Chart 1 Series',
        data: chartData.chart1
      }]
    };

我们将不胜感激您能提供的任何帮助！

Answer 1

您实际上非常接近可行的方法。您的问题与异步调用相对于内联代码的时间有关，以及分配在 javascript 中的工作方式。

作为一个简单的例子，这里有一些代码：

x = {foo:5};
y = x.foo;
x.foo = 9;

最后，x.foo 是 9，但 y 仍然是 5。

你的代码行

chartData.chart1 = json[6]['data'];

在对服务器的调用完成之前不会执行；它包含在回调函数中。不过这段代码

chartOptions.chart1 = {
  chart: {
    type: 'column'
  },
  title: {
    text: 'Chart 1 Title'
  },
  yAxis: {
    title: {
      text: 'Chart 1<br/>Y Axis'
    }
  },
  series: [{
    name: 'Chart 1 Series',
    data: chartData.chart1
  }]
};

立即执行。看到问题了吗？在服务器调用完成之前，您已经将 chartData.chart 的当前值转换为 chartOptions.chart1。这就是您看不到数据的原因。

请尝试以下方法：

chartOptions.chart1 = {
  chart: {
    type: 'column'
  },
  title: {
    text: 'Chart 1 Title'
  },
  yAxis: {
    title: {
      text: 'Chart 1<br/>Y Axis'
    }
  },
  series: [{
    name: 'Chart 1 Series',
    data: []
  }]
};

$.getJSON("../../companies/charts/data.php", {id: escape(tableName)}, function(json) {
    chartOptions.chart1.series[0].data = json[6]['data'];
});

现在，当您的数据返回时，您将其放入实际用于呈现图表的对象中（单击右侧按钮后）。请记住，在服务器调用完成之前它将为空。