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
  }]
};

但无论我尝试了多少，我似乎都无法以这样的方式更改“data：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'];
});

现在，当您的数据恢复时，您将其放入实际用于渲染图表的对象中（一旦您点击右键）。请记住，在服务器调用完成之前，它将为空。

在highcharts中检索JSON数据

1 个答案: