Question

这是我第一次使用Highcharts，我正在努力解决一个小问题，这个问题不能让我在工作中走得更远。

我在MySQL中有一个数据库，我试图使用Highcharts在图表上显示一些信息。

问题在于，即使经过多次尝试，我仍然无法展示我的系列，我无法理解为什么。

这是我的代码：

data.php

<?php
try
{
    $bdd = new PDO('mysql:host=localhost;dbname=name', 'root', '');
}
catch (Exception $e)
{
        die('Erreur : ' . $e->getMessage());
}

$sql=<<<SQL
        SELECT DATE, Traf_BH_TCH_Erl, Trafic_HR_BH, Block_BH_TCH 
        FROM 182_d_all 
        WHERE BCF='TIMNAY'  
SQL;
$reponse = $bdd->query($sql);


$bln = array(); 
$rows = array();
$bln['name'] = 'Date';
$rows['name'] = 'Traf_BH_TCH_Erl';          

while($donnee=$reponse->fetch()){
    $bln['data'][] = $donnee['DATE'];
    $rows['data'][] = $donnee['Traf_BH_TCH_Erl']; 
    }
$rslt = array();
array_push($rslt, $bln);
array_push($rslt, $rows);
print json_encode($rslt, JSON_NUMERIC_CHECK);

$reponse->closeCursor(); 
?>

line.php

<?php
$cakeDescription = "Highcharts Pie Chart";
?>
<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title><?php echo $cakeDescription ?></title>
        <link href="webroot/css/cake.generic.css" type="text/css" rel="stylesheet">
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                var options = {
                    chart: {
                        renderTo: 'container',
                        type: 'line'
                    },
                    title: {
                        text: 'Random title',
                        x: -20 //center
                    },
                    subtitle: {
                        text: 'Random subtitle',
                        x: -20
                    },
                    xAxis: {
                        categories: [],
                        title: {
                            text: 'Date'
                        }
                    },
                    yAxis: {
                        title: {
                            text: 'Traf_BH_TCH_Erl'
                        },
                        plotLines: [{
                                value: 0,
                                width: 1,
                                color: '#808080'
                            }]
                    },
                    tooltip: {
                        valueSuffix: 'Hz' 
                    },
                    legend: {
                        layout: 'vertical',
                        align: 'right',
                        verticalAlign: 'middle',
                        borderWidth: 0
                    },
                    series: []
                };
                $.getJSON("data.php", function(json) {
                    options.xAxis.categories = json[0]['data']; //xAxis: {categories: []}
                    options.series[0] = json[1];
                    chart = new Highcharts.Chart(options);
                });
            }); 

        </script>
        <script src="http://code.highcharts.com/highcharts.js"></script>
        <script src="http://code.highcharts.com/modules/exporting.js"></script>
    </head>
    <body>
       <!-- <a class="link_header" href="/highcharts/">&lt;&lt; Back to index</a> -->
        <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
    </body>
</html>

问题是该系列的所有值都等于零。我不明白为什么它全部空白而不是显示价值？

感谢您的回答！

编辑：

JSON看起来像：

[{＆＃34; name＆＃34;：＆＃34; Date＆＃34;，＆＃34; data＆＃34;：[＆＃34; \ n5 / 6/2015 00：00：00＆＃34 ;，＆＃34; \ n17 / 6/2015 00：00：0＆＃34;，＆＃34; \ n15 / 6/2015 00：00：0＆＃34;，＆＃34; \ n11 / 6/2015 00：00：0＆＃34;，＆＃34; \ n11 / 6/2015 00：00：0＆＃34;，＆＃34; \ n11 / 6/2015 00：00：0＆＃34;，＆＃34 ; \ n11 / 6/2015 00：00：0＆＃34;，＆＃34; \ n26 / 6/2015 00：00：0＆＃34;，＆＃34; \ n18 / 6/2015 00：00：0＆＃34;，＆＃34; \ n18 / 6/2015 00：00：0＆＃34;，＆＃34; \ n16 / 6/2015 00：00：0＆＃34;，＆＃34; \ n7 / 6 / 2015 00:00:00＆＃34;，＆＃34; \ n9 / 6/2015 00：00：00＆＃34;，＆＃34; \ n3 / 6/2015 00：00：00＆＃34;，＆＃34; \ n11 / 6/2015 00：00：0＆＃34;，＆＃34; \ n9 / 6/2015 00：00：00＆＃34;，＆＃34; \ n11 / 6/2015 00:00 ：0＆＃34;，＆＃34; \ n20 / 6/2015 00：00：0＆＃34;，＆＃34; \ n7 / 6/2015 00：00：00＆＃34;，＆＃34; \ n24 / 6/2015 00：00：0＆＃34;，＆＃34; \ n9 / 6/2015 00：00：00＆＃34;，＆＃34; \ n22 / 6/2015 00：00：0＆＃34; ，＆＃34; \ n26 / 6/2015 00：00：0＆＃34;，＆＃34; \ n26 / 6/2015 00：00：0＆＃34;，＆＃34; \ n17 / 6/2015 00 ：00：0＆＃34;，＆＃34; \ n17 / 6/2015 00：00：0＆＃34;，＆＃34; \ n16 / 6/2015 00：00：0＆＃34;，＆＃34; \ n16 / 6/2015 00：00：0＆＃34;，＆＃34; \ n24 / 6/2015 00：00：0＆＃34;，＆＃34; \ n22 / 6/2015 00：00：0＆＃ 34;，＆＃34; \ n24 / 6/2015 00：00：0＆＃34;，＆＃34; \ n22 / 6/2015 00 ：00：0＆＃34;，＆＃34; \ n3 / 6/2015 00：00：00＆＃34;，＆＃34; \ n20 / 6/2015 00：00：0＆＃34;，＆＃34; \ n20 / 6/2015 00：00：0＆＃34;，＆＃34; \ n3 / 6/2015 00：00：00＆＃34;，＆＃34; \ n7 / 6/2015 00：00：00＆＃ 34;，＆＃34; \ n28 / 6/2015 00：00：0＆＃34;，＆＃34; \ n25 / 6/2015 00：00：0＆＃34;，＆＃34; \ n25 / 6 / 2015 00：00：0＆＃34;，＆＃34; \ n25 / 6/2015 00：00：0＆＃34;，＆＃34; \ n5 / 6/2015 00：00：00＆＃34;，＆＃ 34; \ n5 / 6/2015 00：00：00＆＃34;，＆＃34; \ n28 / 6/2015 00：00：0＆＃34;，＆＃34; \ n28 / 6/2015 00:00： 0＆＃34;，＆＃34; \ n15 / 6/2015 00：00：0＆＃34;，＆＃34; \ n15 / 6/2015 00：00：0＆＃34;，＆＃34; \ n23 / 6/2015 00：00：0＆＃34;，＆＃34; \ n21 / 6/2015 00：00：0＆＃34;，＆＃34; \ n19 / 6/2015 00：00：0＆＃34;，＆＃34; \ n19 / 6/2015 00：00：0＆＃34;，＆＃34; \ n19 / 6/2015 00：00：0＆＃34;，＆＃34; \ n30 / 6/2015 00： 00：0＆＃34;，＆＃34; \ n30 / 6/2015 00：00：0＆＃34;，＆＃34; \ n28 / 5/2015 00：00：0＆＃34;，＆＃34; \ n18 / 6/2015 00：00：0＆＃34;，＆＃34; \ n1 / 7/2015 00：00：00＆＃34;，＆＃34; \ n1 / 7/2015 00：00：00＆＃34 ;，＆＃34; \ n1 / 7/2015 00：00：00＆＃34;，＆＃34; \ n8 / 6/2015 00：00：00＆＃34;，＆＃34; \ n8 / 6/2015 00：00：00＆＃34;，＆＃34; \ n8 / 6/2015 00：00：00＆＃34;，＆＃34; \ n4 / 6/2015 00：00：00＆＃34;，＆＃34 ; \ n4 / 6/2015 00：00：00＆＃34;，＆＃34; \ n4 / 6/2015 00：00：00＆＃34; ，＆＃34; \ n28 / 5/2015 00：00：0＆＃34;，＆＃34; \ n28 / 5/2015 00：00：0＆＃34;，＆＃34; \ n29 / 5/2015 00 ：00：0＆＃34;，＆＃34; \ n29 / 5/2015 00：00：0＆＃34;，＆＃34; \ n29 / 5/2015 00：00：0＆＃34;，＆＃34; \ n31 / 5/2015 00：00：0＆＃34;，＆＃34; \ n6 / 6/2015 00：00：00＆＃34;，＆＃34; \ n6 / 6/2015 00：00：00＆＃ 34;，＆＃34; \ n6 / 6/2015 00：00：00＆＃34;，＆＃34; \ n30 / 5/2015 00：00：0＆＃34;，＆＃34; \ n30 / 5 / 2015 00：00：0＆＃34;，＆＃34; \ n21 / 6/2015 00：00：0＆＃34;，＆＃34; \ n21 / 6/2015 00：00：0＆＃34;，＆＃ 34; \ n10 / 6/2015 00：00：0＆＃34;，＆＃34; \ n10 / 6/2015 00：00：0＆＃34;，＆＃34; \ n10 / 6/2015 00:00： 0＆＃34;，＆＃34; \ n23 / 6/2015 00：00：0＆＃34;，＆＃34; \ n23 / 6/2015 00：00：0＆＃34;，＆＃34; \ n29 / 6/2015 00：00：0＆＃34;，＆＃34; \ n11 / 6/2015 00：00：0＆＃34;，＆＃34; \ n11 / 6/2015 00：00：0＆＃34;，＆＃34; \ n11 / 6/2015 00：00：0＆＃34;，＆＃34; \ n27 / 6/2015 00：00：0＆＃34;，＆＃34; \ n29 / 6/2015 00： 00：0＆＃34;，＆＃34; \ n29 / 6/2015 00：00：0＆＃34;，＆＃34; \ n27 / 6/2015 00：00：0＆＃34;，＆＃34; \ n27 / 6/2015 00：00：0＆＃34;，＆＃34; \ n30 / 5/2015 00：00：0＆＃34;，＆＃34; \ n30 / 6/2015 00：00：0＆＃34 ;，＆＃34; \ n1 / 6/2015 00：00：00＆＃34;，＆＃34; \ n1 / 6/2015 00：00：00＆＃34;，＆＃34; \ n1 / 6/2015 00：00：00＆＃34;，＆＃34; \ n31 / 5/2015 00：00：0＆＃34;，＆＃34; \ n31 / 5/2015 00：00：0＆＃34;，＆＃34; \ n2 / 6/2015 00：00：00＆＃34;，＆＃34; \ n2 / 6/2015 00：00：00＆＃34; ，＆＃34; \ n2 / 6/2015 00：00：00＆＃34;，＆＃34; \ n11 / 6/2015 00：00：0＆＃34;，＆＃34; \ n11 / 6/2015 00 ：00：0＆＃34;，＆＃34; \ n11 / 6/2015 00：00：0＆＃34;，＆＃34; \ n11 / 6/2015 00：00：0＆＃34;，＆＃34; \ n11 / 6/2015 00：00：0＆＃34;，＆＃34; \ n11 / 6/2015 00：00：0＆＃34;，＆＃34; \ n11 / 6/2015 00：00：0＆＃ 34;，＆＃34; \ n11 / 6/2015 00：00：0＆＃34;，＆＃34; \ n11 / 6/2015 00：00：0＆＃34;，＆＃34; \ n12 / 6 / 2015 00：00：0＆＃34;，＆＃34; \ n12 / 6/2015 00：00：0＆＃34;，＆＃34; \ n12 / 6/2015 00：00：0＆＃34;，＆＃ 34; \ n12 / 6/2015 00：00：0＆＃34;，＆＃34; \ n12 / 6/2015 00：00：0＆＃34;，＆＃34; \ n12 / 6/2015 00:00： 0＆＃34;]}，{＆＃34;名称＆＃34;：＆＃34; Traf_BH_TCH_Erl＆＃34;＆＃34;数据＆＃34;：[＆＃34; 14,49＆＃34;＆＃34 ; 17,47＆＃34;＆＃34; 12,96＆＃34;＆＃34; 13,10＆＃34;＆＃34; 13,10＆＃34;＆＃34; 12,03＆＃34 ;，＆＃34; 5,59＆＃34;＆＃34; 10,33＆＃34;＆＃34; 3.68＆＃34;＆＃34; 10,42＆＃34;＆＃34; 14,92＆＃34;＆＃34; 12,82＆＃34;＆＃34; 14,49＆＃34;＆＃34; 11,93＆＃34;＆＃34; 12,03＆＃34; ＆＃34; 11,47＆＃34;＆＃34; 5,59＆＃34;＆＃34; 11,09＆＃34;＆＃34; 12,29＆＃34;＆＃34; 10 ，31＆＃34;＆＃34; 5,63＆＃34;＆＃34; 10,15＆＃34;＆＃34; 9.82＆＃34;＆＃34; 4,56＆＃34 ;, ＆＃34; 15,58＆＃34;＆＃34; 8,52＆＃34;＆＃34; 12,77＆＃34;＆＃34; 7.56＆＃34;＆＃34; 10,18＆＃34;＆＃34; 11,23＆＃34;＆＃34; 3,36＆＃34;＆＃34; 4.08＆＃34;＆＃34; 11,96＆＃34;＆＃ 34; 9,97＆＃34;＆＃34; 3,98＆＃34;＆＃34; 5,69＆＃34;＆＃34; 4,97＆＃34;＆＃34; 13,49＆＃ 34;，＆＃34; 8,55＆＃34;＆＃34; 7.88＆＃34;＆＃34; 4,17＆＃34;＆＃34; 12,25＆＃34;＆＃34 ; 5,811,238＆＃34;＆＃34; 8,69＆＃34;＆＃34; 4,72＆＃34;＆＃34; 12,01＆＃34;＆＃34; 5,59＆＃34 ;，＆＃34; 11,58＆＃34;＆＃34; 9,77＆＃34;＆＃34; 9,69＆＃34;＆＃34; 8,47＆＃34;＆＃34; 2,89＆＃34;＆＃34; 9,61＆＃34;＆＃34; 3,24＆＃34;＆＃34; 12,71＆＃34;＆＃34; 8,27＆＃34; ＆＃34; 12,36＆＃34;＆＃34; 10,42＆＃34;＆＃34; 3,67＆＃34;＆＃34; 14,21＆＃34;＆＃34; 13 ，59＆＃34;＆＃34; 4,92＆＃34;＆＃34; 15,37＆＃34;＆＃34; 13,56＆＃34;＆＃34; 4,44＆＃34 ;, ＆＃34; 11,41＆＃34;＆＃34; 7,39＆＃34;＆＃34; 14,90＆＃34;＆＃34; 11,77＆＃34;＆＃34; 6， 63＆＃34;＆＃34; 11,02＆＃34;＆＃34; 12,68＆＃34;＆＃34; 11,48＆＃34;＆＃34; 5,19＆＃34;，＆＃34; 12,37＆＃34;＆＃34; 5,84＆＃34;＆＃34; 8,26＆＃34;＆＃34; 3,87＆＃34;＆＃34; 12,71＆＃34;＆＃34; 11,79＆＃34;＆＃34; 5,37＆＃34;＆＃34; 8,94＆＃34;＆＃34; 3,27＆＃34;＆＃ 34; 9.82＆＃34;＆＃34; 13,10＆＃34;＆＃34; 12,03＆＃34;＆＃34; 5,59＆＃34;＆＃34; 11,31＆＃ 34;，＆＃34; 9,06＆＃34 ;，＆＃34; 3,65＆＃34;＆＃34; 10,13＆＃34;＆＃34; 4,06＆＃34;＆＃34; 9,11＆＃34;＆＃34; 9,79＆＃34;＆＃34; 11,71＆＃34;＆＃34; 11,57＆＃34;＆＃34; 5,46＆＃34;＆＃34; 9,37＆＃34; ＆＃34; 4,59＆＃34;＆＃34; 13,62＆＃34;＆＃34; 13,33＆＃34;＆＃34; 5,34＆＃34;＆＃34; 13 ，10＆＃34;＆＃34; 12,03＆＃34;＆＃34; 5,59＆＃34;＆＃34; 13,10＆＃34;＆＃34; 12,03＆＃34 ;, ＆＃34; 5,59＆＃34;＆＃34; 13,10＆＃34;＆＃34; 12,03＆＃34;＆＃34; 5,59＆＃34;＆＃34; 10， 59＆＃34;＆＃34; 10,00＆＃34;＆＃34; 4,77＆＃34;＆＃34; 10,59＆＃34;＆＃34; 10,00＆＃34;，＆＃34; 4,77＆＃34;]}]

Answer 1

这里有很多事情......

我为了从您的数据中获取功能示例而进行了一些更改：

您必须创建一个＆＃39;数据＆＃39;内部字段＆＃39;系列＆＃39;：
```
series: [{
    data: []
}]
```
您必须设置＆＃39;数据＆＃39;来自＆＃39;系列[0]＆＃39;的属性并从您的JSON传递数据字段：
```
options.series[0].data = text[1].data; 
```
您必须使用数字作为y坐标数据，因此您应使用点作为小数分隔符，不要使用引号：
```
{"name":"Traf_BH_TCH_Erl","data":[11.23,3.36,4.08,11.96,9.97]}
```
您没有正确使用具有日期格式的X轴，但您可以在第一个Highcharts工作后搜索该轴。 ;）

功能示例：JSFiddle

来自highcharts的系列没有显示

1 个答案: