我已经开始使用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>
请有人让我知道我做错了什么吗？
答案 0 :(得分：1)
类别应该是字符串数组
categories: ["<?php echo join('","',$data0) ?>"]
答案 1 :(得分：1)
您的类别必须是字符串 - 目前它们的输出是彼此之后的简单字符。
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属性，没有任何值，这也导致代码失败。
我已经弃用了一些示例数据，但你会明白这一点。
答案 2 :(得分：1)
我看到两个问题。第一个是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控制台中（不知道你正在使用哪个浏览器，以及如何访问它）。
答案 3 :(得分：0)
javascript代码未在document ready事件上执行。因此，也许id =＆＃39; container＆＃39;尚未创建，图表无处可摘。尝试将代码放在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.
答案 4 :(得分：0)
尝试更改此行
categories: ["<?php echo implode('","',$data0) ?>"]