HighCharts:局部变量在"data:"中不工作


HighCharts: local variable not working in "data:"

当我将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; ?>);