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文件中调用一个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; ?>);

HighCharts：本地变量不在“data：”中工作

1 个答案: