Question

我正在尝试显示来自MYSQL的数据。我在http://www.blueflame-software.com/blog/using-highcharts-with-php-and-mysql/看到了一个例子。如何为我的图表实现jQuery.get？请问我是jQuery的新手，需要很多帮助，谢谢！有人可以让我的图表显示数据吗？

html for chart

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>  
<meta charset="utf-8">

   <script src="http://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js"></script>
   <script src="http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.3/scriptaculous.js"></script>
   <script src="http://www.highcharts.com/js/adapters/prototype-adapter.src.js" ></script>
   <script src="http://www.highcharts.com/js/highcharts.src.js"></script>

   <script>      
      var chart;      
      function create()
      {
         chart = new Highcharts.Chart({
                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: [{ 
                    name: 'SSTP Keystone STEEL', 
                    data: [[0.6,74.9 ],[0.895,81.74],[ 1.336,77.26],[ 1.993,76.81], [2.974,80.45 ],[4.438,69.41], [6.622,61.37],[9.881,79.07],[14.744,79.75],[20.000,72.33]],pointStart: 0.6
                     }, {
                    name: 'SSTP Keystone COPPER',
                    data: [[0.6,70.18 ],[0.895,85.57],[ 1.336,75.1],[ 1.993,76.09], [2.974,80.45 ],[4.438,67.32], [6.622,59.79],[9.881,72.37],[14.744,73.54],[20.000,72.8]],pointStart: 0.6
                     }, {
                    name: 'SSTP Keystone COPPER UTP antenna',
                    data: [[0.6,53.32], [0.895,56.53], [1.336,72.16], [1.993,65.82],[2.974,80.45],[4.438,63.16],[6.622,59.79],[9.881,69.63],[14.744,70.41],[20.000,73.45]],pointStart: 0.6
                    }, {
                    name: 'SSTP Keystone COPPER STP antenna',
                    data: [[0.6,62.33], [0.895,61.82], [1.336,79.92], [1.993,76.09],[2.974,76.18],[4.438,63.16],[6.622,61.37],[9.881,72.37],[14.744,74.68],[20.000,72.33]],pointStart: 0.6
                    }, {
                    name: 'absorber inside bundle shield',
                    data: []
                     }, {
                    name: 'Series6',
                    data: []
                    }, {
                    name: 'SEN-2 Baseline Isolation',
                    data: [[0.6,76.07], [0.895,90.28], [1.336,77.26], [1.993,82.58],[2.974,83.53],[4.438,74.63],[6.622,63.45],[9.881,76.86],[14.744,76.98],[20.000,72.33]],pointStart: 0.6
                     }],    
                    });
      }

      function destroy()
      {
         if( chart ) {
            chart.destroy();
            delete chart;
            chart = null;
         }   
      }

      document.observe("dom:loaded", function() {
         $('destroy').observe("click", function(){destroy();})
         $('create').observe("click", function(){create();})
         create();
      });

   </script>
</head>
<body>
   <a id="destroy" href="#">destroy</a> | <a id="create" href="#">create</a>
   <div id="container" style="height: 400px; width: 900px"></div>
</body>
</html>

Answer 1

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

<!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 
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

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

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

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

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

1 个答案: