javascript - Highcharts 中的异步数据输入

Question

我正在使用 $.getJSON 方法从 MySQL 数据库加载数据。然后所有数据都显示在 Highcharts 中。用户可以单击不同的按钮以便在数据集之间进行更改。我的问题是，当页面首次加载时，图表将始终加载为空。我发现这可能是因为我用于检索数据的 $.getJSON 方法是异步的。我不确定是否可以通过将 getJSON 方法切换为 AJAX 方法来解决这个问题。我尝试过但没有成功。或者是否是我的 javascript 函数在单击按钮时切换图表数据就是问题所在。下面是全部代码。我认为导致该问题的代码片段如下所示。我知道您可能需要 JSFiddle，但由于我使用数据库数据，我现在知道如何正确显示问题。

<script>
  var d = new Date();
  var pointStart = d.getTime();
  //-------------------------------------------------------
  //set a 'line' marker type for use in bullet charts 
  Highcharts.Renderer.prototype.symbols.vline = function(x, y, width, height) {
    return ['M', x, y + width / 2, 'L', x + height, y + width / 2];
  };
  Highcharts.Renderer.prototype.symbols.hline = function(x, y, width, height) {
    return ['M', x, y + height / 2, 'L', x + width, y + width / 2];
  };
  //-------------------------------------------------------
  Highcharts.setOptions({
    global: {
      useUTC: false
    },
    colors: [
      'rgba( 253, 99,  0,   0.9 )', //bright orange
      'rgba( 40,  40,  56,  0.9 )', //dark
      'rgba( 253, 0,   154, 0.9 )', //bright pink
      'rgba( 154, 253, 0,   0.9 )', //bright green
      'rgba( 145, 44,  138, 0.9 )', //mid purple
      'rgba( 45,  47,  238, 0.9 )', //mid blue
      'rgba( 177, 69,  0,   0.9 )', //dark orange
      'rgba( 140, 140, 156, 0.9 )', //mid
      'rgba( 238, 46,  47,  0.9 )', //mid red
      'rgba( 44,  145, 51,  0.9 )', //mid green
      'rgba( 103, 16,  192, 0.9 )' //dark purple
    ],
    chart: {
      alignTicks: false,
      type: '',
      margin: [70, 100, 70, 90],
      //borderRadius:10,
      //borderWidth:1,
      //borderColor:'rgba(156,156,156,.25)',
      //backgroundColor:'rgba(204,204,204,.25)',
      //plotBackgroundColor:'rgba(255,255,255,1)',
      style: {
        fontFamily: 'Abel,serif'
      },
      events: {
        load: function() {
          this.credits.element.onclick = function() {
            window.open(
              ''
            );
          }
        }
      }
    },

  });
</script>



<script>
var chart,
  chartOptions = {},
  chartData = {};


chartOptions.chart1 = {
  chart: {
    type: 'column'
  },
  title: {
    text: '<?php echo $companyName; ?>',
    style: {
      fontSize: '20px'
    }
  },
  subtitle: {
      text: 'Revenues',
      align: 'left',
      x: 55,
      style: {
        fontSize: '16px'
      }
  },
  xAxis: {
    categories: []
  },
  yAxis: {
    title: {
      text: '<?php echo $unitCurr; ?>'
    }
  },
  series: [{
    name: 'Revenues',
    color: '#006699',
    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[1]['data'];
});


chartOptions.chart2 = {
  chart: {
    type: 'column'
  },
  title: {
    text: '<?php echo $companyName; ?>',
    style: {
      fontSize: '20px'
    }
  },
  subtitle: {
      text: 'Earnings before interest and taxes',
      align: 'left',
      x: 55,
      style: {
        fontSize: '16px'
      }
  },
  xAxis: {
    categories: []
  },
  yAxis: {
    title: {
      text: '<?php echo $unitCurr; ?>'
    }
  },
  series: [{
    name: 'EBIT',
    color: '#006699',
    data: []
  }]
};
var tableName = '<?php echo $tableName; ?>'
$.getJSON("../../companies/charts/Data.php", {id: escape(tableName)}, function(json) {
    chartOptions.chart2.xAxis.categories = json[0]['data'];
    chartOptions.chart2.series[0].data = json[4]['data'];
});

$(function() {

    //common options
  Highcharts.setOptions({
    chart: {
      marginRight: 0
    },
    legend: {
      enabled: false
    },
    plotOptions: {
      bar: {
        pointPadding: .01
      },
      column: {
        borderWidth: 0.5
      },
      line: {
        lineWidth: 1
      },
    },
    series: [{
        color: '#027ff7',
    }]
  });
      $('#container').highcharts(chartOptions.chart1);
      chart = $('#container').highcharts();

      $(document).on('click', '.chart-update', function() {
        $('button').removeClass('selected');
            $(this).addClass('selected');
            chart.destroy();
        $('#container').highcharts(chartOptions[$(this).data('chartName')]);
        chart = $('#container').highcharts();
      });
});



</script>
</head>



<body>

    <span class="wrapper">
        <span class="block chart"><div id="container" style="width:400px;height:300px;margin:1.5em 1em;float:left;"></div></span>
        <span class="block buttons">
            <div><button class="chart-update selected" data-chart-name="chart1">CHART1</button></div>
            <div><button class="chart-update" data-chart-name="chart2">CHART2</button></div>

        </span>
    </span>



</body>

</html>

所以具体来说，我想知道以下两个部分是否是造成该问题的原因:

var tableName = '<?php echo $tableName; ?>'
$.getJSON("../../companies/charts/Data.php", {id: escape(tableName)}, function(json) {
    chartOptions.chart2.xAxis.categories = json[0]['data'];
    chartOptions.chart2.series[0].data = json[4]['data'];
});

或

      $('#container').highcharts(chartOptions.chart1);
      chart = $('#container').highcharts();

      $(document).on('click', '.chart-update', function() {
        $('button').removeClass('selected');
            $(this).addClass('selected');
            chart.destroy();
        $('#container').highcharts(chartOptions[$(this).data('chartName')]);
        chart = $('#container').highcharts();
      });

我尝试使用 AJAX 方法来切换 JSON 方法，而不是将 async 设置为 false。如下所示(不起作用，现在即使单击按钮也不会显示任何数据)。

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

如果你使用ajax，我想没有必要将async属性设置为false。另外，似乎您在 ajax 调用中拼错了 success 。

当您的 ajax 调用返回成功时，只需声明所有 highchart 初始化即可。所以基本上，ajax 方法位于 highchart 初始化之上。