HIghCharts PHP MySQL_Php_Jquery_Mysql_Highcharts

HIghCharts PHP MySQL

php jquery mysql highcharts

HIghCharts PHP MySQL,php,jquery,mysql,highcharts,Php,Jquery,Mysql,Highcharts,我是Highcharts的新手，正在尝试学习如何将它与PHP和MySQL结合使用。我想从数组中的一些示例数据显示一个简单的柱状图。但是，我在实现这一点时遇到了一些问题。这些列没有显示在图表中，我得到的额外标签在图例中是空白的。如果有人能帮助我清理这段代码，让它工作起来，并提供带有注释的示例代码，以帮助更好地理解它，那将是一个很大的帮助。我相信其他一些人也在寻找类似的例子。我已经浏览了这个网站和HighCharts论坛以及示例，但没有找到我想要的能够更好地帮助我学习如何使用PHP和MySQL创建动

我是Highcharts的新手，正在尝试学习如何将它与PHP和MySQL结合使用。我想从数组中的一些示例数据显示一个简单的柱状图。但是，我在实现这一点时遇到了一些问题。这些列没有显示在图表中，我得到的额外标签在图例中是空白的。如果有人能帮助我清理这段代码，让它工作起来，并提供带有注释的示例代码，以帮助更好地理解它，那将是一个很大的帮助。我相信其他一些人也在寻找类似的例子。我已经浏览了这个网站和HighCharts论坛以及示例，但没有找到我想要的能够更好地帮助我学习如何使用PHP和MySQL创建动态列类型图表的内容。如果你能帮忙，我会提前感谢你

这是我的代码，我知道它有几个问题，我试图把它作为一个简短的例子，让新手和学生很容易理解。非常感谢您的帮助：

我的示例数据包含此人的姓氏和销售额。它是TSV格式，数组如下所示：Doe 3567 Right 5476 Johnson 4351 Brown 2945

data.php

    <?php
    $con = mysql_connect("localhost","root","");
    if (!$con) {
      die('Could not connect: ' . mysql_error());
    }
    mysql_select_db("test", $con);
    $result = mysql_query("SELECT * FROM user");
    while($row = mysql_fetch_array($result)) {
      echo $row['lastname'] . "\t" . $row['sales']. "\n";
    }
    mysql_close($con);
    ?>

index.php

<!DOCTYPE html><html><head>
</head><body>
<div id="container" style="height: 400px; width: 900px"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://www.highcharts.com/js/highcharts.src.js"></script>
<script>
jQuery(function($) {
    var options = {
        chart: {renderTo: 'container', defaultSeriesType:'column', height: 400},
        title: {text: 'Sales Performance'},
        xAxis: {title: {text: 'Sales Peoples'}, type: 'linear'},
        yAxis: {title: {text: 'Dollars'}, plotLines: [{ value: 0, width: 1, color: '#808080'}]},
        tooltip: {
            formatter: function() {
                return '<b>'+ this.series.name +'</b><br/>'+'('+this.x +' : '+ this.y +')';
            }
        },
        legend: {layout: 'vertical', align: 'left', verticalAlign: 'top', x: 40, y: 100,   borderWidth: 0, width: 300 },
        series: []
    };

    jQuery.get('data.php', null, function(tsv) {
        var data = {};
        tsv = tsv.split(/\n/g); // split into rows
        for (var row=0, rows=tsv.length; row<rows; row++) {
            var line = tsv[row].split(/\t/g), // split into columns
                series_name = line[0],
                x = Number(line[1]),
                y = Number(line[2]);
            if (!data[series_name]) data[series_name] = [];
            data[series_name].push([x,y]);
            //alert("The data is: "+series_name)
        }
        for (var series_name in data) {
            options.series.push({
                name: series_name,
                data: data[series_name]
            });
        }
        new Highcharts.Chart(options);
    });

});
</script>
</body></html>


jQuery（函数（$）{
变量选项={
图表：{renderTo:'container'，defaultSeriesType:'column'，height:400}，
标题：{text:'Sales Performance'}，
xAxis:{title:{text:'Sales people'}，键入：'linear'}，
yAxis:{title:{text:'Dollars'}，绘图线：[{value:0，width:1，color:'#808080'}]}，
工具提示：{
格式化程序：函数（）{
返回“+this.series.name+”
“+”（“+this.x+”：“+this.y+”）；
}
},
图例：{layout:'vertical'，align:'left'，verticalAlign:'top'，x:40，y:100，borderWidth:0，width:300}，
系列：[]
};
get（'data.php'，null，函数（tsv）{
变量数据={}；
tsv=tsv.split（/\n/g）；//拆分成行
对于（var row=0，rows=tsv.length；row
数据[系列名称].push（[x，y]）
您还没有y
和line[2]
您好Kazatca，谢谢您的回复。这有助于清理一些问题，但仍然不起作用。我尝试了您的建议，还为格式化程序修改了这一行。返回“+this.series.name+”
+（“+this.x+”）“；
在执行Kazatca的建议后，我在series_name和x上放置了一个警报。从中我可以看到，tsv=tsv.split我在名称中有一个空白值，这会触发x的最后一个值的NaN。根据我所读的内容，这将导致图表不显示在HighCharts中，这就是现在的问题。如果e可以帮助我编写一些代码来检查空白值，如果它们或NaN存在，则将其删除，这可能会清理这些值并使其显示图表。我仍然是一个学习新手，不知道如何通过编程实现。非常感谢！tsv.split（/\n/）始终返回[“一些数据”，“一些数据”，“因为tsv以“\n”。在服务器端尝试内爆（“\n”，$collected）。教程可以帮助您解决此问题
data[series_name].push(x);