Highchart-使用PHP，MYSQL和jQuery.get來解析數據

我試圖從MYSQL顯示數據。我在http://www.blueflame-software.com/blog/using-highcharts-with-php-and-mysql/看到一個例子。我如何爲我的圖表實現jQuery.get？請給我很新的jQuery，並且需要很多幫助，謝謝！有人可以讓我的圖表顯示數據嗎？Highchart-使用PHP，MYSQL和jQuery.get來解析數據

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>

來源

2012-06-29 mgrobins

您可能希望在將代碼片段粘貼回代碼之前，在代碼編輯器中將這些代碼片段稍微選中，以使它們更易於閱讀。 – BoltClock

感謝BoltClock的代碼是在我的編輯器中設置的，因爲它們應該是。我不得不在這裏選中它，以便它會顯示在網站上。 – mgrobins

我編輯了問題以修復縮進。 –

好，這是一個完整的解決方案：

<!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財產。

來源

2012-06-30 01:47:56

您是否重寫了data2.php腳本？也許我用我的腳本做了些什麼？該圖表沒有填充。你用數據寫了一個MYSQL表嗎？ – mgrobins

Highchart-使用PHP，MYSQL和jQuery.get來解析數據

回答

相關問題