0

さまざまな種類のグラフを含むさまざまなシリーズを示す単一のグラフを作成する必要があります (例: 'areaspline' を含む 1 つのデータ シリーズと 'column' を含む 1 つのデータ シリーズ)。SQLクエリによってjsonファイルに抽出された、大量のデータを含むデータベースを構築しました

[
    { "name": "Test", "data": [2.8,2.8,2.8,2.7,2.7,] },
    { "name": "kwc", "data": [10,1,10,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0] }
]

json ファイルは正しいのですが、$.each 関数でグラフのシリーズを選択しようとすると機能しません! これが私のコードです

<!DOCTYPE HTML>
    <html>
            <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Highcharts Example</title>
        <script src="estrazione.php"></script> 
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <script type="text/javascript">
      $(function () {
            $.getJSON("new3.php", function(json) {
            $.each(json.data, function(index, item){
        // split the data set into ohlc and volume
        var temperatura = [],
            misura = [],
            dataLength = json.length;

        for (i = 0; i < dataLength; i++) {
            temperatura.push([
                data[i][0] 
            ]);

            misura.push([
                data[i][1]
            ])
        }
        $('#container').highcharts({
            chart: {
                zoomType: 'xy'
            },
            title: {
                text: 'Analisi Temperature e Consumo Generale',
            },

            xAxis: [{
                categories: ['00.00', '00.15', '00.30', '00.45', '01.00', '01.15', '01.30', '01.45', '02.00', '02.15', '02.30', '02.45', '03.00', '03.15', '03.30', '03.45', '04.00', '04.15', '04.30', '04.45', '05.00', '05.15', '05.30', '05.45', '06.00', '06.15', '06.30', '06.45', '07.00', '07.15', '07.30', '07.45', '08.00', '08.15', '08.30', '08.45', '09.00', '09.15', '09.30', '09.45', '10.00', '10.15', '10.30', '10.45', '11.00', '11.15', '11.30', '11.45', '12.00', '12.15', '12.30', '12.45', '13.00', '13.15', '13.30', '13.45', '14.00', '14.15', '14.30', '14.45', '15.00', '15.15', '15.30', '15.45', '16.00', '16.15', '16.30', '16.45', '17.00', '17.15', '17.30', '17.45', '18.00', '18.15', '18.30', '18.45', '19.00', '19.15', '19.30', '19.45', '20.00', '20.15', '20.30', '20.45', '21.00', '21.15', '21.30', '21.45', '22.00', '22.15', '22.30', '22.45', '23.00', '23.15', '23.30', '23.45'],
            }],
            yAxis: [{ // Primary yAxis
                labels: {
                    format: '{value}°C',
                    style: {
                        color: '#89A54E'
                    }
                },
                title: {
                    text: 'Temperature',
                    style: {
                        color: '#89A54E'
                    }
                }
            }, { // Secondary yAxis
                title: {
                    text: 'Consumo',
                    style: {
                        color: '#4572A7'
                    }
                },
                labels: {
                    format: '{value} Kw',
                    style: {
                        color: '#4572A7'
                    }
                },
                opposite: true
            }],
            tooltip: {
                shared: true
            },
            legend: {
                layout: 'vertical',
                align: 'left',
                x: 120,
                verticalAlign: 'top',
                y: 100,
                floating: true,
                backgroundColor: '#FFFFFF'
            },
            series: [{
                name: 'Misure',
                color: '#4572A7',
                type: 'column',
                yAxis: 1,
                data: misura,
                tooltip: {
                    valueSuffix: ' Kw'
                }

            }, {
                name: 'Temperature',
                color: '#89A54E',
                type: 'spline',
                data: temperatura,
                tooltip: {
                    valueSuffix: '°C'
                }
            }]
        });
    });


        </script>
    </head>
    <body>
<script src="js/highcharts.js"></script>
<script src="js/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

    </body>
</html>'

これは私のphpコードです:

<?php
$data_scelta = "2013-08-08";
$misura = "kwc";
$temperatura = "Test";
$link = mysqli_connect('localhost:3306', 'root', '','telegestione');
    if (!$link)     {
        die('Could not connect: ' . mysqli_error());}
$sth = mysqli_query($link,"SELECT $temperatura FROM temperature WHERE dataora BETWEEN '$data_scelta 00:00:00.000'
                          AND '$data_scelta 23:59:59.997'");
$rows = array();
$rows['name'] = $temperatura;
while($r = mysqli_fetch_assoc($sth)) {
    $rows['data'][] = $r[$temperatura];}
$sth = mysqli_query($link,"SELECT $misura FROM misure WHERE dataora BETWEEN '$data_scelta 00:00:00.000'
                          AND '$data_scelta 23:59:59.997'");
$rows1 = array();
$rows1['name'] = $misura;
while($rr = mysqli_fetch_assoc($sth)) {
    $rows1['data'][] = $rr[$misura];}
$result = array();
array_push($result,$rows);
array_push($result,$rows1);
print json_encode($result, JSON_NUMERIC_CHECK);
?>

私はあらゆる種類のオプションを試しましたが、何もうまくいきませんでした:( 1つのチャート、2つ以上のデータシリーズ、2つ以上のタイプのチャートを表示したいですか?事前に感謝します

4

1 に答える 1

0

ハイチャート作成呼び出しが $.each 関数内にあるようです。したがって、2 つのハイチャートを作成しようとしますが、両方とも同じ div に作成されるため、最終的には 1 つだけになります。また、データ長を計算する方法は 2 になります。それが表示されたら、実際のデータの長さを希望します (シリーズによって異なります)。私はjsfiddleでgetJSONを実行できないので、あなたのPHPコードがあなたがリストしたjsonオブジェクトを作成していると仮定しています(そしてそれはそうであるように見えます)。各ループを完全に失い、2 つのシリーズを次のように設定できます。

   series: [{
        name: 'Misure',
        color: '#4572A7',
        type: 'column',
        yAxis: 1,
        data: json[1].data,
        tooltip: {
            valueSuffix: ' Kw'
        }

    }, {
        name: 'Temperature',
        color: '#89A54E',
        type: 'spline',
        data: json[0].data,
        tooltip: {
            valueSuffix: '°C'
        }
    }]

http://jsfiddle.net/bhlaird/dUkuY/

于 2013-10-09T21:18:06.840 に答える