Highchart-使用PHP、MYSQL和jQuery.get解析数据_Php_Jquery_Mysql_Highcharts

Highchart-使用PHP、MYSQL和jQuery.get解析数据

php jquery mysql highcharts

Highchart-使用PHP、MYSQL和jQuery.get解析数据,php,jquery,mysql,highcharts,Php,Jquery,Mysql,Highcharts,我正在尝试显示来自MYSQL的数据。我在学校看到了一个例子。如何为图表实现jQuery.get？请告诉我，我是jQuery的新手，需要很多帮助，谢谢！有人能让我的图表显示数据吗图表的html 好的，这里有一个完整的解决方案： <!DOCTYPE html><html><head> </head><body> <div id="container" style="height: 400px; width: 900px">

我正在尝试显示来自MYSQL的数据。我在学校看到了一个例子。如何为图表实现jQuery.get？请告诉我，我是jQuery的新手，需要很多帮助，谢谢！有人能让我的图表显示数据吗

图表的html

好的，这里有一个完整的解决方案：

<!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:'spline', height: 400},
        title: {text: 'SEN-2 Bulkhead Isolation'},
        xAxis: {title: {text: 'Frequency Hz'}, type: 'logarithmic'},
        yAxis: {title: {text: 'Isolation dB'}, 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: 'right', verticalAlign: 'top', x: 40, y: 100, borderWidth: 0, width: 300 },
        series: []
    };

    jQuery.get('data2.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]);
        }
        for (var series_name in data) {
            options.series.push({
                name: series_name,
                data: data[series_name]
            });
        }
        new Highcharts.Chart(options);
    });

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

我所做的是通过TSV循环，并构建数据变量，就像序列名称上的关联数组一样，如下所示：

{
    'SSTP Keystone STEEL': [[0.6,74.9],[0.895,81.74],...],
    ...
}

然后，我循环遍历数据变量并以HighCharts期望的格式构造options.series—一个包含name属性和data属性的对象数组。

在粘贴代码片段之前，您可能希望在代码编辑器中对这些代码片段进行一点回签，以使它们更易于阅读。谢谢您的代码是在我的编辑器中设置的。我不得不在这里贴标签，这样它就会出现在网站上。我编辑了这个问题来修正缩进。酷，是的，看起来整洁多了。谢谢你，马克！看起来您在输出中使用了一个选项卡来分隔前两个字段，然后使用逗号分隔最后一个字段。然后在JS中，您将完全删除这个逗号，因此x和y值将连接在一起。这不可能是对的……您重写了data2.php脚本吗？也许我对我的剧本做了些什么？图表未填充。您是否编写了包含数据的MYSQL表？

SSTP Keystone STEEL 0.6 74.9 
SSTP Keystone STEEL 0.895   81.74
SSTP Keystone STEEL 1.336   77.26
SSTP Keystone STEEL 1.993   76.81
SSTP Keystone STEEL 2.974   80.45 
SSTP Keystone STEEL 4.438   69.41
SSTP Keystone STEEL 6.622   61.37
SSTP Keystone STEEL 9.881   79.07
SSTP Keystone STEEL 14.744  79.75
SSTP Keystone STEEL 20.000  72.33

{
    'SSTP Keystone STEEL': [[0.6,74.9],[0.895,81.74],...],
    ...
}