php - HighCharts:局部变量在 "data:"中不起作用

Question

当我将 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 文件中并“包含”它。我现在只需从 .js 文件中定义的 php 文件调用 Print 函数，并向其传递我需要的 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'
    }
    }]
});
});

}

我只需要在图表中使用这些作为数据传入的变量。提前致谢!

Answer 1

通过在 PHP 代码周围放置单引号，如下所示:

PrintTemperatureChart(1, '<?php echo $temperatureToDisplay; ?>');

这些变量作为字符串传递，这与 HighCharts 中“数据”字段期望的整数类型不兼容。解决方案:

PrintTemperatureChart(1, <?php echo $temperatureToDisplay; ?>);