0
私が書いているPHPページでハイチャートを作成しようとしています。ハイチャートは、このページの単なる例です。http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/gauge-speedometer/html phpページでハイチャートを埋め込むのに問題があります
私はjavascriptを完全に新しくしており、divは空のままです。あなたはスクリプトタグを紛失し
<!DOCTYPE html>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script type="text/javascript" src="scripts/chart.js" ></script>
<?php
require_once 'login.php';
$con=mysqli_connect($hh,$un,$pw,$db);
// Check connection
if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
# Get Set temp data:
$sql = "SELECT reqdTemp FROM PiBQ_Temp WHERE tableKey = 1";
$result = mysqli_query($con,$sql);
if(mysqli_num_rows($result) > 0) {
$row = mysqli_fetch_assoc($result);
$setTemp = $row['reqdTemp'];
}
# Get hood temp data:
$sql = "SELECT hoodTemp FROM PiBQ_Run ORDER BY tableKey DESC LIMIT 1";
$result = mysqli_query($con,$sql);
if(mysqli_num_rows($result) > 0) {
$row = mysqli_fetch_assoc($result);
$hoodTemp = $row['hoodTemp'];
}
# Get damper posn data:
$sql = "SELECT damperPosn FROM PiBQ_Run ORDER BY tableKey DESC LIMIT 1";
$result = mysqli_query($con,$sql);
if(mysqli_num_rows($result) > 0) {
$row = mysqli_fetch_assoc($result);
$damperPosn = round(($row['damperPosn']/1100)*90,0);
}
mysql_close($con);
?>
<html>
<head>
<title>PiBQ Home</title>
<link href="css/style.css" type="text/css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Patua+One" rel="stylesheet">
</head>
<body>
<div id="wrapper">
<div id="header">
<a href="settings.php"><img id="imgSettings" src="img/settings.png" alt="settings.png" style="width:40px;height:40px;"></a>
<span class="title">RPi BBQ</span>
<img id="imgRPi" src="img/raspberry-pi-logo.png" alt="raspberry-pi-logo.png" style="width:40px;height:40px;">
</div>
<div id="main">
<div id="container">
</div>
<div id="updateTemp">
<form action="updateTemp.php" method="post">
<input id="setTemp" type="text" name="setTemp" value="<?= $setTemp ?>"/>
<input type="submit" value="Set Temperature" />
</form>
</div>
</div>
<div id="footer">
Footer
</div>
</div>
</body>
</html>
マイchart.js
Highcharts.chart('container', {
chart: {
type: 'gauge',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: 'Speedometer'
},
pane: {
startAngle: -150,
endAngle: 150,
background: [{
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, '#FFF'],
[1, '#333']
]
},
borderWidth: 0,
outerRadius: '109%'
}, {
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, '#333'],
[1, '#FFF']
]
},
borderWidth: 1,
outerRadius: '107%'
}, {
// default background
}, {
backgroundColor: '#DDD',
borderWidth: 0,
outerRadius: '105%',
innerRadius: '103%'
}]
},
// the value axis
yAxis: {
min: 0,
max: 200,
minorTickInterval: 'auto',
minorTickWidth: 1,
minorTickLength: 10,
minorTickPosition: 'inside',
minorTickColor: '#666',
tickPixelInterval: 30,
tickWidth: 2,
tickPosition: 'inside',
tickLength: 10,
tickColor: '#666',
labels: {
step: 2,
rotation: 'auto'
},
title: {
text: 'km/h'
},
plotBands: [{
from: 0,
to: 120,
color: '#55BF3B' // green
}, {
from: 120,
to: 160,
color: '#DDDF0D' // yellow
}, {
from: 160,
to: 200,
color: '#DF5353' // red
}]
},
series: [{
name: 'Speed',
data: [80],
tooltip: {
valueSuffix: ' km/h'
}
}]
},
// Add some life
function (chart) {
if (!chart.renderer.forExport) {
setInterval(function() {
var point = chart.series[0].points[0],
newVal,
inc = Math.round((Math.random() - 0.5) * 20);
newVal = point.y + inc;
if (newVal < 0 || newVal > 200) {
newVal = point.y - inc;
}
point.update(newVal);
}, 3000);
}
});
...実行する必要があります。下の '