我正在处理一个将显示条形图的项目。条形图运行得很好，但当我试图将一个整数php变量传递给javascript变量并将该变量添加为列表元素时，它就不起作用了。下面是我的代码。我不知道我的源代码出了什么问题。我花了几个小时在网上寻找解决方案，但没有得到任何解决方案。
期待您的回复。
<html>
<head><title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<style type="text/css">
#container {
height: 400px;
min-width: 310px;
max-width: 800px;
margin: 0 auto;
}
</style>
<?php
//my php variable
$ab=6;
?>
<script type="text/javascript">
//assign the php variable to javascript variable
var za = <?php echo $ab; ?>;
$(function () {
$('#container').highcharts({
chart: {
type: 'column',
options3d: {
enabled: true,
alpha: 10,
beta: 25,
depth: 70
}
},
title: {
text: '3D chart with null values'
},
subtitle: {
text: 'Notice the difference between a 0 value and a null point'
},
plotOptions: {
column: {
depth: 25
}
},
xAxis: {
categories: Highcharts.getOptions().lang.shortMonths
},
yAxis: {
title: {
text: null
}
},
series: [{
name: 'Sales',
// I'm putting the variable as an element below, but it's not working
data: [za, 3, null, 4, 0, 5, 1, 4, 6, 3]
}]
});
});
</script>
</head>
<body>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="height: 400px"></div>
</body>
值得注意的是，您应该避免以这种方式与javascript交互。PHP在与HTML交互时工作得更好，并让javascript独立（这是使用真正的模板系统的一半，你应该这样做）：
<?php
// page setup goes up here:
$ab = 6; // name your variables at little more descriptively, I don't know what this does
?>
<head>
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<style type="text/css">
#container { height: 400px; min-width: 310px; max-width: 800px; margin: 0 auto; }
</style>
<script type="text/javascript">
$(function () {
console.log($('#ab-variable').val());
$('#container').highcharts({
chart: {
type: 'column',
options3d: {
enabled: true,
alpha: 10,
beta: 25,
depth: 70
}
},
title: {
text: '3D chart with null values'
},
subtitle: {
text: 'Notice the difference between a 0 value and a null point'
},
plotOptions: {
column: {
depth: 25
}
},
xAxis: {
categories: Highcharts.getOptions().lang.shortMonths
},
yAxis: {
title: {
text: null
}
},
series: [{
name: 'Sales',
// We're referencing our hidden field in the HTML
data: [$('#ab-variable').val(), 3, null, 4, 0, 5, 1, 4, 6, 3]
}]
});
});
</script>
</head>
<body>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<!-- we're including our variable here, in HTML, rather than in the javascript -->
<input type="hidden" id="ab-variable" value="<?= $ab; ?>">
<div id="container" style="height: 400px"></div>
</body>
然后，您可以在HTML中查看隐藏字段的值是否正确。如果它仍然不起作用，那么使用highcharts的javascript设置就有问题了。
如果您以这种方式编写代码，您将获得额外的好处，即能够创建一个单独的javascript文件，该文件将缓存在客户端，并且他们不必每次都下载它。
事实上，您的代码似乎没有任何固有的问题，但重新分解（在有保证的情况下）有时会发现一些小错误。为了确认这段代码应该按照您想要的方式工作，我添加了一个console.log()调用，以确保您的javascript可以看到您的变量。要查看更多内容，您必须提供页面链接，这样我们才能看到可能出现的任何错误。