当我将javascript内联到我的php文件中时,我有一个highcharts温度计工作。然而,我想把highcharts代码在一个"包含"的js文件。之前,当我将javascript内联编码到php文件中时,它看起来像这样:
// html and php above
// this inline code below works
<script>
$(document).ready(function(){
// here i simply accessed a php variable from
var $temperature_F = <?php echo round((($temp["Temperature"] * 9) / 5) + 32, 1); ?>;
var chart1 = new Highcharts.Chart({
// code initializing everything else in the highchart
series: [{
data: [{
id: 'temperature',
y: $temperature_F, // value taken from php variable
tooltip: {
valueSuffix: ' 'xB0F'
}
}]
}]
});
})
</script>
// html and php below
现在,我所做的就是把这段代码放到一个。js文件中,然后"包含"它。现在,我只需从php文件中调用一个Print函数(在.js文件中定义),并将所需的php变量传递给它。这样的:
<script type="text/javascript">
PrintTemperatureChart(1, '<?php echo $temperatureToDisplay; ?>', '<?php echo $dewPointToDisplay; ?>', '<?php echo $relativeHumidityToDisplay; ?>');
</script>
从这个函数中,我能够"警告"出我传入的预期php变量,但是,当我试图将"data:"设置为这些变量之一时,它会破坏图表。当我用一个虚拟的硬编码值替换变量时,它可以工作。所以我知道其他的都设置正确了。下面是.js文件中的函数:
function PrintTemperatureChart(unitsMode, temperature, dewPoint, relativeHumidity){
alert(unitsMode + ", " + temperature + ", " + dewPoint + ", " + relativeHumidity);
$(function () {
alert("The passed temperature = " + temperature);
var $theTemp = temperature;
var chart1 = new Highcharts.Chart({
chart: {
renderTo: 'Temperature_Chart',
type: 'gauge',
margin: 0
},
title: {
text: 'Temperature'
},
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%'
}]
},
yAxis: {
title: {
text: ''xB0F'
},
min: 0,
max: 120,
minorTickInterval: 1,
minorTickWidth: 1,
minorTickLength: 5,
minorTickPosition: 'inside',
minorGridLineWidth: 0,
minorTickColor: 'black',
tickInterval: 10,
tickWidth: 2,
tickPosition: 'inside',
tickLength: 10,
tickColor: 'black',
},
series: [{
name: 'Temperature',
data: [$theTemp], // this doesn't work
// this is the js var set to the passed in temperature
// I've also just tried using the param directly
// only a hard coded value will work
// i.e. data: [56],
tooltip: {
valueSuffix: ' 'xB0F'
}
}]
});
});
}
我只需要在我的图表中使用这些变量作为数据传入。提前感谢!
通过像这样在PHP代码周围放置单引号:
PrintTemperatureChart(1, '<?php echo $temperatureToDisplay; ?>');
这些变量被作为字符串传递,这与HighCharts中"data"字段期望的整数类型不兼容。解决方案:
PrintTemperatureChart(1, <?php echo $temperatureToDisplay; ?>);