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.seriesHighCharts が期待する形式 (nameプロパティとプロパティを持つオブジェクトの配列) で構築しdataます。

于 2012-06-30T01:47:56.877 に答える