Javascript 仅渲染一个div的Highcharts
我在这个论坛上寻找关于我的问题的解释，但找不到任何对我有帮助的。 我的问题是，我想在我的网站上显示两个实心量规和一个样条曲线，但我一次只能看到一个图表 以下是我的代码，我猜错误是：Javascript 仅渲染一个div的Highcharts,javascript,html,highcharts,Javascript,Html,Highcharts,我在这个论坛上寻找关于我的问题的解释，但找不到任何对我有帮助的。 我的问题是，我想在我的网站上显示两个实心量规和一个样条曲线，但我一次只能看到一个图表 以下是我的代码，我猜错误是： <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Data</title&g
<!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>
资料
功能目标弹出窗口（表格）{
打开（“”，'formpopup'，'width=950，height=400，可调整大小，滚动条'）；
form.target='formpopup'；
}
$（文档）.ready（函数（）{
var计量选项={
图表：{
类型：“solidgauge”
},
标题：空，
窗格：{
中心：['50%，'85%，]，
大小：“140%”，
startAngle:-90，
端角：90，
背景：{
背景颜色：（Highcharts.theme&&Highcharts.theme.background2）| |'#EEE'，
内半径：“60%”，
外层：“100%”，
形状：“圆弧”
}
},
工具提示：{
已启用：false
},
//价值轴
亚克斯：{
停止：[
[0.1，#55BF3B']，//绿色
[0.5，#DDDF0D']，//黄色
[0.9，#DF5353']//红色
],
线宽：0，
minorTickInterval:null，
像素间隔：400，
宽度：0，
标题：{
y:-70
},
标签：{
y:16
}
},
打印选项：{
solidgauge：{
数据标签：{
y:5，
边框宽度：0，
useHTML:true
}
}
}
};
//第一个仪表
$（“#yearlykm”）.海图{
亚克斯：{
分:0,，
最高：13392，
标题：{
文字：“2015年的距离”
}
},
学分：{
已启用：true
},
系列：[{
名称：“2015年的距离”，
数据：[
],
数据标签：{
格式：“{y}
”+
“总公里”
},
工具提示：{
valueSuffix:'总公里'
}
}]
}));
//第二个量表
$（'#totalkm'）。highcharts（highcharts.merge（gaugeOptions{
亚克斯：{
分:0,，
最高：80000，
标题：{
文字：“总距离”
}
},
系列：[{
名称：“总距离”，
数据：[
],
数据标签：{
格式：“{y:.1f}
”+
“总公里”
},
工具提示：{
valueSuffix:'总升'
}
}]
}));
});
$（文档）.ready（函数（）{
变量选项={
图表：{
renderTo：“汽车”，
类型：“样条线”，
marginRight:0，
marginBottom:25，
背景颜色：“#FFFFFF”
},
标题：{
文本：“”，
x:-00/中心
},
xAxis：{
类别：[]
},
亚克斯：{
标题：{
风格：{
颜色：“白色”
},
文本：“”
},
绘图线：[{
值：0，
宽度：1，
颜色：“#ffff00”
}]
},
工具提示：{
格式化程序：函数（）{
返回“+this.series.name+”
+
this.x+'：'+this.y+'€'；
}
},
图例：{
布局：“水平”，
对齐：'居中'，
垂直排列：'中心'，
十点,，
y:-19，
边框宽度：0，
风格：{
fontSize:'10px'，
颜色：'#000000'，
}
},
打印选项：{
样条曲线：{
填充颜色：{
线性梯度：{
x1:1，
y1:0.1，
x2:0，
y2:0.2
},
停止：[
[0，Highcharts.getOptions（）.Color[0]]，
[1，Highcharts.Color（Highcharts.getOptions（）.colors[0]）。setOpacity（0）。get（'rgba'）]
]
},
数据标签：{
已启用：false
},
enableMouseTracking：true
}
},
系列：[]
}
$.getJSON（“../data/data\u car.php”），函数（json）{
options.xAxis.categories=json[0]['data']；
options.series[0]=json[1]；
options.series[1]=json[2]；
图表=新的高点图表。图表（选项）；