个人中心
gpt4 book ai didi

javascript - 如何调试不工作的基于 AJAX 的 HighChart？

转载 作者：行者123 更新时间：2023-11-30 09:50:23 25 4
gpt4 key购买 nike

我遇到了 HighChart。我已经遵循了一些教程，但不幸的是我无法执行。该页面正在加载空白。我已经添加了所有必需的脚本。

代码如下:

data.php

    <?php
    $con = mysql_connect("localhost","root","root");

if (!$con) {
  die('Could not connect: ' . mysql_error());
}

mysql_select_db("demo", $con);

$query = mysql_query("SELECT month, wordpress, codeigniter, highcharts FROM project_requests");

$category = array();
$category['name'] = 'Month';

$series1 = array();
$series1['name'] = 'Wordpress';

$series2 = array();
$series2['name'] = 'CodeIgniter';

$series3 = array();
$series3['name'] = 'Highcharts';


while($r = mysql_fetch_array($query)) {
    $category['data'][] = $r['month'];
    $series1['data'][] = $r['wordpress'];
    $series2['data'][] = $r['codeigniter'];
    $series3['data'][] = $r['highcharts'];   
}

$result = array();
array_push($result,$category);
array_push($result,$series1);
array_push($result,$series2);
array_push($result,$series3);

print json_encode($result, JSON_NUMERIC_CHECK);

mysql_close($con);              

    ?>

index.php

<!DOCTYPE HTML>
<head>
        <meta http-equiv="Content-Type" content=html>
    "text/html; charset=utf-8">
        <title>Bar chart with data from MySQL using Highcharts</title>
        <script type="text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"</script>
        <script type="text/javascript">


            $(document).ready(function() {


            var url = "http://localhost/test/example9/data.php";

            $.getJSON(url, function(json) {
                options.xAxis.categories = json[0]['data'];
                options.series[0] = json[1] ;
                options.series[1] = json[2] ;
                options.series[2] = json[3] ;

                var chart = new Highcharts.Chart(options);



            var options = {
                chart: {
                    renderTo: 'container',
                    type: 'bar'
                },
                title: {
                    text: 'Project Requests',
                    x: -20 //center
                },
                subtitle: {
                    text: '',
                    x: -20
                },
                xAxis: {
                    categories: []
                },
                yAxis: {
                    min: 0,
                    title: {
                        text: 'Requests'
                    },
                    labels: {
                        overflow: 'justify'
                    }
                },
                tooltip: {
                    formatter: function() {
                            return '<b>'+ this.series.name +'</b><br/>'+
                            this.x +': '+ this.y;
                    }
                },
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'top',
                    x: -10,
                    y: 100,
                    borderWidth: 0
                }, 
                plotOptions: {
                    bar: {
                        dataLabels: {
                            enabled: true
                        }
                    }
                },
                series: [{}]
            }



            });
        });
        </script>

<script type="text/javascript" src="http://jquery-json.googlecode.com/files/jquery.json-2.2.js" ></script>
<script type="text/javascript" src="http://code.jugal.me/js/jugalsLib.js" ></script>
<script type="text/javascript" src="http://code.highcharts.com/stock/highstock.src.js" ></script>
<script type="text/javascript" src="http://code.highcharts.com/stock/modules/exporting.src.js" ></script>
    </head>
    <body>
        <div id="container" style="min-width: 400px; height: 800px; margin: 0 auto"></div>
    </body>
</html>

我跟踪了 data.php 呈现的 AJAX 响应，并在浏览器的网络选项卡中找到了以下文本:

浏览器网络选项卡--响应

<br />

<font size='1'><table class='xdebug-error xe-deprecated' dir='ltr' border='1' cellspacing='0' cellpadding='1'>
<tr><th align='left' bgcolor='#f57900' colspan="5"><span style='background-color: #cc0000; color: #fce94f; font-size: x-large;'>( ! )</span> Deprecated: mysql_connect(): The mysql extension is deprecated and will be removed in the future: use mysqli or PDO instead in C:\wamp\www\test\example9\data.php on line <i>2</i></th></tr>

<tr><th align='left' bgcolor='#e9b96e' colspan='5'>Call Stack</th></tr>

<tr><th align='center' bgcolor='#eeeeec'>#</th><th align='left' bgcolor='#eeeeec'>Time</th><th align='left' bgcolor='#eeeeec'>Memory</th><th align='left' bgcolor='#eeeeec'>Function</th><th align='left' bgcolor='#eeeeec'>Location</th></tr>

<tr><td bgcolor='#eeeeec' align='center'>1</td><td bgcolor='#eeeeec' align='center'>0.0000</td><td bgcolor='#eeeeec' align='right'>246984</td><td bgcolor='#eeeeec'>{main}(  )</td><td title='C:\wamp\www\test\example9\data.php' bgcolor='#eeeeec'>..\data.php<b>:</b>0</td></tr>

<tr><td bgcolor='#eeeeec' align='center'>2</td><td bgcolor='#eeeeec' align='center'>0.0000</td><td bgcolor='#eeeeec' align='right'>247272</td><td bgcolor='#eeeeec'><a href='http://www.php.net/function.mysql-connect' target='_new'>mysql_connect</a>
(  )</td><td title='C:\wamp\www\test\example9\data.php' bgcolor='#eeeeec'>..\data.php<b>:</b>2</td></tr>
</table></font>
[{"name":"Month","data":["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]},{"name":"Wordpress","data":[4,5,6,2,5,7,2,1,6,7,3,4]},{"name":"CodeIgniter","data":[5,2,3,6,7,1,2,6,6,4,6,3]},{"name":"Highcharts","data":[7,8,9,6,7,10,9,7,6,9,8,4]}]

最佳答案

您似乎对剪切和粘贴很着急。

我鼓励您逐行检查代码并找出它的作用。

只有这样你才能学会。我可以在途中为您提供一些帮助:

从 index.php 开始Dharmesh Goswami 已经用 "text/html; charset=utf-8"> 指出了不完整的行.在该行下方，您有一个打开的脚本标记。不见了>

如果你看一下你的 JavaScript，在 $.getJSON(url, function(json) { 下面的前六行:

 options.xAxis.categories = json[0]['data'];
 options.series[0] = json[1] ;
 options.series[1] = json[2] ;
 options.series[2] = json[3] ;

 var chart = new Highcharts.Chart(options);

 var options = {
 ...

这是怎么回事？您正在更改对象 options四次，然后在 var options = { 创建它.在那之前 var chart = new Highcharts.Chart(options);您正在使用 options 中的设置初始化 HighChart .在你创建它之前!

在 JS 中你需要以 var options = { 开头，然后您可以更改 xAxis 和系列，然后您可以使用 var chart =... 初始化 HighCharts .

至于data.php，我建议您打开它的url 并确保它打印出有效的json。并且 json 是 HighChart 期望的格式。

这是一个显示 ajax 加载数据的官方 fiddle :http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/line-ajax/

祝你好运。

关于javascript - 如何调试不工作的基于 AJAX 的 HighChart？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36886003/

25 4 0
文章推荐： java - JAXB 保留传递给 Marshaller 的对象
文章推荐： javascript - 如何在页面加载后执行功能在angularjs中完成
文章推荐： Python 机器学习标签和特征
文章推荐： machine-learning - 神经网络和 XOR 作为分类
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com