没有使用HighCharts显示图表

No chart is shown using HighCharts

本文关键字：显示图 HighCharts 更新时间：2023-09-26

我已经开始使用HighCharts，我已经想出了下面的代码来测试它，但问题是没有显示图表。

我想要一个简单的折线图，日期沿着底部，数字向上。

代码

<?php
$sql = array(
    'user'     => 'removed',
    'password' => 'removed',
    'server'   => 'removed',
    'db'       => 'removed'
);
$conn = oci_connect($sql['user'], $sql['password'], $sql['server'].'/'.$sql['db']);
if (!$conn) {
    $e = oci_error();
    trigger_error( htmlentities($e['message'], ENT_QUOTES), E_USER_ERROR );
}
$result = oci_parse($conn, "SELECT EntryDate, COUNT(OrderNo) FROM Orders GROUP BY EntryDate");
oci_execute($result);
while ($row = oci_fetch_array($result)) {
   $data0[] = $row['0'];
   $data1[] = $row['1'];
}
?>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script>
var chart = new Highcharts.Chart({
      chart: {
         renderTo: 'container',
         type: 'line'
      },
      xAxis: {
          categories: [<?php echo join($data0, ',') ?>]
      },
      yAxis: {
          title: {
              text: 'Orders'
          }
      },
      series: [{
         data: [<?php echo join($data1, ',') ?>],
         pointStart: 0,
         pointInterval
      }]
});
</script>
<div id="container" style="height:100%; width:100%;"></div>

结果

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script>
var chart = new Highcharts.Chart({
      chart: {
         renderTo: 'container',
         type: 'line'
      },
      xAxis: {
          categories: [01-NOV-12,02-NOV-12,03-NOV-12,05-NOV-12,06-NOV-12,07-NOV-12,08-NOV-12,09-NOV-12,12-NOV-12,13-NOV-12,14-NOV-12,15-NOV-12,16-NOV-12,19-NOV-12,20-NOV-12,21-NOV-12,22-NOV-12,23-NOV-12,24-NOV-12,26-NOV-12,27-NOV-12,28-NOV-12,29-NOV-12,30-NOV-12,01-DEC-12,02-DEC-12,03-DEC-12,04-DEC-12,05-DEC-12,06-DEC-12,07-DEC-12,10-DEC-12,11-DEC-12,12-DEC-12,13-DEC-12,14-DEC-12,17-DEC-12,18-DEC-12,19-DEC-12,20-DEC-12,21-DEC-12,03-JAN-13,04-JAN-13,05-JAN-13,07-JAN-13,08-JAN-13,09-JAN-13,10-JAN-13,11-JAN-13,14-JAN-13,15-JAN-13,16-JAN-13,17-JAN-13,18-JAN-13,21-JAN-13,22-JAN-13,23-JAN-13,24-JAN-13,25-JAN-13,28-JAN-13,29-JAN-13,30-JAN-13,31-JAN-13,01-FEB-13,04-FEB-13,05-FEB-13,06-FEB-13,07-FEB-13,08-FEB-13,11-FEB-13,12-FEB-13,13-FEB-13,14-FEB-13,15-FEB-13,16-FEB-13,18-FEB-13,19-FEB-13,20-FEB-13,21-FEB-13,22-FEB-13,25-FEB-13,26-FEB-13,27-FEB-13,28-FEB-13,01-MAR-13,02-MAR-13,04-MAR-13,05-MAR-13,06-MAR-13,07-MAR-13,08-MAR-13,11-MAR-13,12-MAR-13,13-MAR-13,14-MAR-13,15-MAR-13,16-MAR-13,17-MAR-13,18-MAR-13,19-MAR-13,20-MAR-13,21-MAR-13,22-MAR-13,25-MAR-13,26-MAR-13,27-MAR-13,28-MAR-13,02-APR-13,03-APR-13,04-APR-13,05-APR-13,08-APR-13,09-APR-13,10-APR-13,11-APR-13,12-APR-13,15-APR-13,16-APR-13,17-APR-13,18-APR-13,19-APR-13,22-APR-13,23-APR-13,24-APR-13,25-APR-13,26-APR-13,29-APR-13,30-APR-13,01-MAY-13,02-MAY-13,03-MAY-13,07-MAY-13,08-MAY-13,09-MAY-13,10-MAY-13,13-MAY-13,14-MAY-13,15-MAY-13,16-MAY-13,17-MAY-13,18-MAY-13,20-MAY-13,21-MAY-13,22-MAY-13,23-MAY-13,24-MAY-13,25-MAY-13,28-MAY-13,29-MAY-13,30-MAY-13,31-MAY-13,03-JUN-13,04-JUN-13,05-JUN-13,06-JUN-13,07-JUN-13,10-JUN-13,11-JUN-13,12-JUN-13,13-JUN-13,14-JUN-13,17-JUN-13,18-JUN-13,19-JUN-13,20-JUN-13,21-JUN-13,24-JUN-13,25-JUN-13,26-JUN-13,27-JUN-13,28-JUN-13,01-JUL-13,02-JUL-13,03-JUL-13,04-JUL-13,05-JUL-13,08-JUL-13,09-JUL-13,10-JUL-13,11-JUL-13,12-JUL-13,15-JUL-13,16-JUL-13,17-JUL-13,18-JUL-13,19-JUL-13,22-JUL-13,23-JUL-13,24-JUL-13,25-JUL-13,26-JUL-13,29-JUL-13,30-JUL-13,31-JUL-13,01-AUG-13,02-AUG-13,05-AUG-13,06-AUG-13,07-AUG-13,08-AUG-13,09-AUG-13,12-AUG-13,13-AUG-13,14-AUG-13,15-AUG-13,16-AUG-13,19-AUG-13,20-AUG-13,21-AUG-13,22-AUG-13,23-AUG-13,27-AUG-13,28-AUG-13,29-AUG-13,30-AUG-13,02-SEP-13,03-SEP-13,04-SEP-13,05-SEP-13,06-SEP-13,09-SEP-13,10-SEP-13,11-SEP-13,12-SEP-13,13-SEP-13,15-SEP-13,16-SEP-13,17-SEP-13,18-SEP-13,19-SEP-13,20-SEP-13,21-SEP-13,23-SEP-13,24-SEP-13,25-SEP-13,26-SEP-13,27-SEP-13,28-SEP-13,30-SEP-13,01-OCT-13,02-OCT-13,03-OCT-13,04-OCT-13,05-OCT-13,07-OCT-13,08-OCT-13,09-OCT-13,10-OCT-13,11-OCT-13,12-OCT-13,14-OCT-13,15-OCT-13,16-OCT-13,17-OCT-13,18-OCT-13,21-OCT-13,22-OCT-13,23-OCT-13,24-OCT-13,25-OCT-13,28-OCT-13,29-OCT-13,30-OCT-13,31-OCT-13,01-NOV-13,04-NOV-13,05-NOV-13,06-NOV-13,07-NOV-13,08-NOV-13,11-NOV-13,12-NOV-13,13-NOV-13,14-NOV-13,15-NOV-13,18-NOV-13,19-NOV-13,20-NOV-13,21-NOV-13,22-NOV-13,25-NOV-13,26-NOV-13,27-NOV-13,28-NOV-13,29-NOV-13,02-DEC-13,03-DEC-13,04-DEC-13,05-DEC-13,06-DEC-13,09-DEC-13,10-DEC-13,11-DEC-13,12-DEC-13,13-DEC-13,16-DEC-13,17-DEC-13,18-DEC-13,19-DEC-13,20-DEC-13,02-JAN-14,03-JAN-14,06-JAN-14,07-JAN-14,08-JAN-14,09-JAN-14,10-JAN-14,13-JAN-14,14-JAN-14,15-JAN-14,16-JAN-14,17-JAN-14,20-JAN-14,21-JAN-14,22-JAN-14,23-JAN-14,24-JAN-14,27-JAN-14,28-JAN-14,29-JAN-14,30-JAN-14,31-JAN-14,03-FEB-14,04-FEB-14,05-FEB-14,06-FEB-14,07-FEB-14,10-FEB-14,11-FEB-14,12-FEB-14,13-FEB-14,14-FEB-14,17-FEB-14,18-FEB-14,19-FEB-14,20-FEB-14,21-FEB-14,24-FEB-14,25-FEB-14,26-FEB-14,27-FEB-14,28-FEB-14,03-MAR-14,04-MAR-14,05-MAR-14,06-MAR-14,07-MAR-14,10-MAR-14,11-MAR-14,12-MAR-14,13-MAR-14,14-MAR-14,17-MAR-14,18-MAR-14,19-MAR-14,20-MAR-14,21-MAR-14,24-MAR-14,25-MAR-14,26-MAR-14,27-MAR-14,28-MAR-14,31-MAR-14,01-APR-14,02-APR-14,03-APR-14,04-APR-14,07-APR-14,08-APR-14,09-APR-14,10-APR-14,11-APR-14,14-APR-14,15-APR-14,16-APR-14,17-APR-14,22-APR-14,23-APR-14,24-APR-14,25-APR-14,28-APR-14,29-APR-14,30-APR-14,01-MAY-14,02-MAY-14,06-MAY-14,07-MAY-14,08-MAY-14,09-MAY-14,12-MAY-14,13-MAY-14,14-MAY-14,15-MAY-14,16-MAY-14,19-MAY-14,20-MAY-14,21-MAY-14,22-MAY-14,23-MAY-14,27-MAY-14,28-MAY-14,29-MAY-14,30-MAY-14,02-JUN-14,03-JUN-14,04-JUN-14,05-JUN-14,06-JUN-14,09-JUN-14,10-JUN-14,11-JUN-14,12-JUN-14,13-JUN-14,16-JUN-14,17-JUN-14,18-JUN-14,19-JUN-14,20-JUN-14,23-JUN-14,24-JUN-14,25-JUN-14,26-JUN-14,27-JUN-14,30-JUN-14,01-JUL-14,02-JUL-14,03-JUL-14,04-JUL-14,07-JUL-14,08-JUL-14,09-JUL-14,10-JUL-14,11-JUL-14,14-JUL-14,15-JUL-14,16-JUL-14,17-JUL-14,18-JUL-14,21-JUL-14,22-JUL-14,23-JUL-14,24-JUL-14,25-JUL-14,28-JUL-14,29-JUL-14,30-JUL-14,31-JUL-14,01-AUG-14,04-AUG-14,05-AUG-14,06-AUG-14,07-AUG-14,08-AUG-14,11-AUG-14,12-AUG-14,13-AUG-14,14-AUG-14,15-AUG-14,18-AUG-14,19-AUG-14,20-AUG-14,21-AUG-14,22-AUG-14,26-AUG-14,27-AUG-14,28-AUG-14,29-AUG-14,01-SEP-14,02-SEP-14,03-SEP-14,04-SEP-14,05-SEP-14]
      },
      yAxis: {
          title: {
              text: 'Orders'
          }
      },
      series: [{
         data: [543,555,91,488,626,498,639,516,553,687,616,887,514,483,643,443,699,436,131,389,721,475,878,431,409,19,513,841,631,636,286,701,746,574,597,404,561,772,450,367,122,380,552,111,383,460,640,573,423,469,758,680,550,206,350,464,363,702,595,467,646,589,713,409,499,672,682,670,506,581,495,866,602,566,211,477,605,568,809,647,577,791,517,808,319,201,515,831,611,653,431,453,737,510,573,621,163,65,810,870,631,774,648,639,714,697,589,543,395,738,548,883,670,745,629,553,572,676,806,860,605,686,766,693,712,594,657,579,927,867,657,723,643,826,552,824,730,726,910,485,200,715,799,697,879,579,178,705,865,766,532,734,776,700,764,688,781,643,725,818,560,616,865,828,730,548,698,533,796,850,581,590,569,904,746,376,603,940,548,893,486,713,708,744,978,675,642,737,759,632,715,446,992,756,863,507,532,744,812,538,709,577,815,590,831,575,620,768,618,878,621,806,776,814,555,524,958,752,853,774,613,923,720,888,671,6,483,626,639,755,681,325,547,759,788,520,617,458,611,1021,878,909,653,139,515,794,750,708,555,155,549,744,755,997,531,534,801,702,824,550,574,773,829,705,475,603,688,881,805,645,634,873,644,748,619,655,791,655,800,632,585,814,646,743,693,564,823,699,848,539,580,726,587,722,504,562,557,408,443,285,517,299,483,536,610,731,509,554,667,651,570,544,570,650,688,503,598,699,655,676,612,566,632,730,706,707,569,591,885,728,780,504,648,691,840,664,648,746,760,651,629,499,674,843,582,764,745,767,724,661,831,584,788,954,716,690,581,719,926,807,749,454,681,945,798,856,686,603,905,711,845,470,604,845,753,615,767,713,852,546,819,864,831,746,600,862,733,907,717,770,868,789,997,605,886,808,763,652,721,633,698,760,713,681,898,821,819,721,787,738,767,728,540,660,759,767,620,615,687,852,751,727,527,680,733,735,750,623,862,811,845,805,720,772,811,861,755,648,773,799,884,801,652,605,700,884,896,714,877,808,810,669,774,784,766,989,794,741,810,870,818,576,629,676,744,733,679,750,880,878,604,450],
         pointStart: 0,
         pointInterval
      }]
});
</script>
<div id="container" style="height:100%; width:100%;"></div>

有人能告诉我我做错了什么吗？

我看到两个问题。第一个是categories应该是字符串列表，正如其他人已经提到的那样：

categories: ["<?php echo join($data0, '","') ?>"]

第二个问题：在DOM中存在#container之前调用new Highcharts.Chart()。因此，您必须将整个JS封装在一个函数中，以便在加载DOM后调用它。这个jQuery小片段将在DOM加载后调用Highcharts函数。

<script type="text/javascript">
$(document).ready(function() {
 // your JS-code
});
</script>

顺便说一句，这两个错误都记录在JS控制台中（不知道你在使用哪个浏览器，也不知道如何访问它）。

您的类别必须是字符串-当前它们的输出是一个接一个的简单字符。

var chart = new Highcharts.Chart({
      chart: {
         renderTo: 'container',
         type: 'line'
      },
      xAxis: {
          categories: ['01-NOV-12', '02-NOV-12']
      },
      yAxis: {
          title: {
              text: 'Orders'
          }
      },
      series: [{
         data: [543,555]
      }]
});

您可以通过将categories: [<?php echo join($data0, ',') ?>]更改为以下内容来实现这一点：

categories: [<?php echo "'".implode($data0, "','")."'" ?>]

implode(seperator, array)函数将把数组中的所有值放在一起，用给定的字符分隔——将其扩展为以撇号开头和结尾，将导致日期输出为字符串类别名称。

此外，在JS的末尾有一个pointInterval属性，没有任何值，这也导致了代码的失败。我已经否决了您的一些示例数据，但您会明白的。

类别应该是字符串数组

categories: ["<?php echo join('","',$data0) ?>"]

javascript代码不会在document ready事件上执行。因此，id为'container'的div可能还没有创建，图表也没有绘制的地方。试着把代码放在div后面，如下所示：

<div id='container'>
</div>
<script>
//highcharts config code
</script>

您也可以将javascript放在一个匿名函数中，并在声明后执行：

<div id='container'>
</div>
<script>
(function(){
  //Highcharts config code here.
} ());
</script>

正如其他答案所指出的，配置是json格式的，因此您应该使用有效的json值，例如string, number, true or false, or null.

尝试更改此行

categories: ["<?php echo implode('","',$data0) ?>"]