1

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

用于图表的 html

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

1 回答 1

0

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

<!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变量并options.series以 HighCharts 期望的格式构造 - 具有name属性和data属性的对象数组。

于 2012-06-30T01:47:56.877 回答