dongpu2694 2016-04-14 03:33
浏览 73
已采纳

使用带有php和MySql的highcharts时，只显示我的标题

I am new to highcharts. I can get the title to show up, but for some reason the x and y axis data won't come up. I am getting my data from a database with php, along with encoding it with JSON. Here is my HTML:

 <!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script type="text/javascript">

        $(document).ready(function() {

            var options = {
                chart: {
                    renderTo: 'container',
                    type: 'bar'
                },
                title: {
                    text: 'TCP Upload Speed Averages for Los Angeles County in 2012',
                    x: -20 //center
                },
                subtitle: {
                    text: '',
                    x: -20
                },
                xAxis: {
                    categories: []
                },
                yAxis: {
                    min:0,
                    title: {
                        text: 'TCP Upload Averages'
                    },
                    labels: {
                    overflow: 'justify'
                }
                },
               legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'top',
                x: -10,
                y: 100,
                borderWidth: 0
            }, 

               plotOptions: {
                bar: {
                    dataLabels: {
                        enabled: true
                    }
                },
                series: {

                   stacking:'percent' 
                }

            },
                series: []
            };
            $.getJSON("2012Data.php", function(json) {



                options.xAxis.categories = json[0]['data'];//xAxis: {categories: []}

                options.series[0] = json[1];



                //chart = new Highcharts.Chart(options);
            });
            chart = new Highcharts.Chart(options);
        });

    </script>
    <script src="highstock.js" ></script>
    <script src="http://code.highcharts.com/modules/exporting.js"></script>

</head>
<body>
    <div id="container" style="width: 600px; height: 400px; margin: 0 auto"></div>
</body>

Here is my JSON data from the php:

[{"name":"Providers","data":["AT&T","Sprint","T-Mobile","Verizon"]},{"name":"Averages","data":[972.03790849673,679.63696969697,992.06606060606,4520.2101851852]}]

Thanks for the help!

  • 写回答

1条回答 默认 最新

  • dtkz3186 2016-04-14 08:02
    关注

    Your chart displays only the title because no data is loaded. And although your AJAX-call might be working: setting the options in its callback is too late, since the callback will most likely be invoked only after the chart has been created.

    Does it work for you if you uncomment the line //chart = new Highcharts.Chart(options); in the getJSON callback (and of course remove the other Highcharts constructor call two lines down)?

    However, the more idiomatic way to load data is to create a callback for the load-Event of the chart, fire your AJAX-Request and then insert the data in the already created chart. I have created a JSFiddle for you where i simulate the call to your php-script via a timeout. You should get your chart working by using the following load-callback:

    chart: {
  events: {
    load: function(event) {
      var chart = event.target;

      $.getJSON("2012Data.php", function(json) {
        var xAxis = chart.xAxis[0];
        xAxis.setCategories(json[0]['data']);
        chart.addSeries(json[1]);
      });
    }
  }  
}
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

悬赏问题

  • ¥15 微信会员卡等级和折扣规则
  • ¥15 微信公众平台自制会员卡可以通过收款码收款码收款进行自动积分吗
  • ¥15 随身WiFi网络灯亮但是没有网络，如何解决？
  • ¥15 gdf格式的脑电数据如何处理matlab
  • ¥20 重新写的代码替换了之后运行hbuliderx就这样了
  • ¥100 监控抖音用户作品更新可以微信公众号提醒
  • ¥15 UE5 如何可以不渲染HDRIBackdrop背景
  • ¥70 2048小游戏毕设项目
  • ¥20 mysql架构，按照姓名分表
  • ¥15 MATLAB实现区间[a,b]上的Gauss-Legendre积分