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

Question

当我把javascript内联到我的php文件中时，我有一个highcharts温度计在工作。然而，我想把highcharts代码放在一个“包含”的js文件中。以前，当我用php文件内联编写javascript时，它看起来像这样：

// 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文件中的打印函数，并将所需的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中"data“字段所需的整数类型不兼容。解决方案：

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