1

phpファイルにjavascriptをインラインで配置すると、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変数を「アラート」することができますが、これらの変数の1つに「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'
    }
    }]
});
});

}

チャートのデータとして渡されたこれらの変数を使用する必要があります。前もって感謝します！

4

1 に答える 1

0

次のようにPHPコードを一重引用符で囲みます。

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

これらの変数は文字列として渡されていました。これは、HighChartsで「データ」フィールドが期待する整数型とは互換性がありません。解決：

PrintTemperatureChart(1, <?php echo $temperatureToDisplay; ?>);
于 2013-02-28T17:20:24.170 に答える