javascript - 检索 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
  }]
};

但无论我如何尝试，我似乎都无法以检索从 $.getJSON 函数获取的数组的方式更改“data:chartData.chart1”。你们中的任何人都可以帮我解释为什么下面的代码不起作用吗？在这里，我尝试将 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'];
});

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