我在这个论坛上寻找解释我的问题的解释，但找不到任何有帮助我的东西。 我的问题是，我希望在我的网站上显示两个实心仪表和一个样条曲线，但我一次只能看到一个图表。
这是我的代码，我猜错误是：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Data</title>
<script src="../js/jquery-1.11.1.min.js"></script>
<script src="../js/highcharts.js"></script>
<script src="../js/highcharts-more.js"></script>
<script src="../js/solid-gauge.js"></script>
<link rel="stylesheet" href="../css/style.css">
<link href='http://fonts.googleapis.com/css?family=Abel|BenchNine|Poiret+One|Ropa+Sans|Ubuntu|Marvel' rel='stylesheet' type='text/css'>
<script>
function target_popup(form){
window.open('','formpopup','width=950,height=400,resizeable,scrollbars');
form.target = 'formpopup';
}
</script>
</head>
<body>
<!-- JS -->
<script>
$(document).ready(function() {
var gaugeOptions = {
chart: {
type: 'solidgauge'
},
title: null,
pane: {
center: ['50%', '85%'],
size: '140%',
startAngle: -90,
endAngle: 90,
background: {
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
innerRadius: '60%',
outerRadius: '100%',
shape: 'arc'
}
},
tooltip: {
enabled: false
},
// the value axis
yAxis: {
stops: [
[0.1, '#55BF3B'], // green
[0.5, '#DDDF0D'], // yellow
[0.9, '#DF5353'] // red
],
lineWidth: 0,
minorTickInterval: null,
tickPixelInterval: 400,
tickWidth: 0,
title: {
y: -70
},
labels: {
y: 16
}
},
plotOptions: {
solidgauge: {
dataLabels: {
y: 5,
borderWidth: 0,
useHTML: true
}
}
}
};
// The first gauge
$('#yearlykm').highcharts(Highcharts.merge(gaugeOptions, {
yAxis: {
min: 0,
max: 13392,
title: {
text: 'Distance for 2015'
}
},
credits: {
enabled: true
},
series: [{
name: 'Distance for 2015',
data: [<?php include("../data/db_car.php");
$sql = "SELECT sum(km) as SUMKM FROM tbl_data";
$result = mysql_query($sql);
while ($line = mysql_fetch_array($result))
{
echo $line[SUMKM];
}
?>
],
dataLabels: {
format: '<div style="text-align:center"><span style="font-size:25px;color:' +
((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span><br/>' +
'<span style="font-size:12px;color:silver">total km</span></div>'
},
tooltip: {
valueSuffix: ' total km '
}
}]
}));
// The second gauge
$('#totalkm').highcharts(Highcharts.merge(gaugeOptions, {
yAxis: {
min: 0,
max: 80000,
title: {
text: 'Total Distance'
}
},
series: [{
name: 'Total Distance',
data: [<?php include("../data/db_car.php");
$sql2 = "SELECT sum(liters) as SUMLITERS FROM tbl_data";
$result2= mysql_query($sql2);
while ($line2 = mysql_fetch_array($result2))
{
echo $line2[SUMLITERS];
}
?>
],
dataLabels: {
format: '<div style="text-align:center"><span style="font-size:25px;color:' +
((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y:.1f}</span><br/>' +
'<span style="font-size:12px;color:silver">total km</span></div>'
},
tooltip: {
valueSuffix: ' total liters'
}
}]
}));
});
</script>
<!-- JS -->
<script>
$(document).ready(function() {
var options = {
chart: {
renderTo: 'car',
type: 'spline',
marginRight: 0,
marginBottom: 25,
backgroundColor: '#FFFFFF'
},
title: {
text: '',
x: -00 //center
},
xAxis: {
categories: []
},
yAxis: {
title: {
style: {
color: 'white'
},
text: ''
},
plotLines: [{
value: 0,
width: 1,
color: '#ffff00'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y +' €';
}
},
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'center',
x: 00,
y: -19,
borderWidth: 0,
style: {
fontSize: '10px',
color: '#000000',
}
},
plotOptions: {
spline: {
fillColor: {
linearGradient : {
x1: 1,
y1: 0.1,
x2: 0,
y2: 0.2
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
dataLabels: {
enabled: false
},
enableMouseTracking: true
}
},
series: []
}
$.getJSON("../data/data_car.php", function(json) {
options.xAxis.categories = json[0]['data'];
options.series[0] = json[1];
options.series[1] = json[2];
chart = new Highcharts.Chart(options);
});
});
</script>
<!-- HTML STARTS HERE -->
<div id="header-wrapper">All Car Data</div>
<div id="menu">
<a href="../index.php">Home</a> |
<a href="../phpmyadmin" target="_blank">PHP MyAdmin</a> |
<a href="../data/fxall.php">All FX Data</a> |
<a href="../data/travellall.php">All Travel Data</a> |
<a href="../dev/">Travel Dev</a> |
<a href="../dev/car.php">Car</a>
</div>
<div id="page">
<div id="page-bgtop">
<div id="page-bgbtm">
<div id="page-content">
<div id="content">
<br>CHARTS<p>
<div style="width: 600px; height: 200px; margin: 0 auto">
<div id="yearlykm" style="width: 300px; height: 200px;"></div>
<div id="totalkm" style="width: 300px; height: 200px;"></div>
</div><p>
<div id="car" style="width:630px; height: 200px;"></div><p>
</div>
<div id="sidebar">
</div>
</div>
</div>
</div>
</div>
<div id="footer"></div>
</body>
</html>
感谢任何帮助或指针！
提前致谢！