Question

我必须创建一个单独的图表，显示具有不同类型图表的不同系列（例如：一个带有'areaspline'的数据系列和一个带有'column'的数据系列）。我构建了一个包含大量数据的数据库，通过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个或更多类型的图表？提前致谢

Answer 1

看起来您的highcharts创建调用在$ .each函数中。所以它会尝试创建2个高图，但它们都将在同一个div中创建，所以你最终只会得到一个。此外，您计算数据长度的方式，它将是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/

多个系列，多个图表Highcharts

1 个答案: