sql >> データベース >  >> RDS >> Mysql

ハイチャート-PHP、MYSQL、jQuery.getを使用してデータを解析する

    さて、ここに完全な解決策があります:

    <!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 プロパティ。




    1. PGAdminからCSVファイルをインポートしようとしたときにアクセスが拒否されました

    2. 行が存在する場合はIDを返し、存在しない場合はINSERTを返します

    3. ハロウィーンの問題–パート1

    4. 2019データベースのトレンド– SQLとNoSQL、トップデータベース、単一データベースと複数データベースの使用