Question

我正在尝试在我正在编写的php页面中使用高级图表。高图只是此页面的一个示例：http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/gauge-speedometer/

我担心我对javascript完全不熟悉而且我的div仍然是空的。

我的index.php是这样的：

<!DOCTYPE html>

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script type="text/javascript" src="scripts/chart.js" ></script> 

<?php
  require_once 'login.php';
  $con=mysqli_connect($hh,$un,$pw,$db);
  // Check connection
  if (mysqli_connect_errno())
    {
    echo "Failed to connect to MySQL: " . mysqli_connect_error();
    }
  # Get Set temp data:
  $sql = "SELECT reqdTemp FROM PiBQ_Temp WHERE tableKey = 1";
  $result = mysqli_query($con,$sql);
  if(mysqli_num_rows($result) > 0) {
    $row = mysqli_fetch_assoc($result);
    $setTemp = $row['reqdTemp'];
  }

  # Get hood temp data:
  $sql = "SELECT hoodTemp FROM PiBQ_Run ORDER BY tableKey DESC LIMIT 1";
  $result = mysqli_query($con,$sql);
  if(mysqli_num_rows($result) > 0) {
    $row = mysqli_fetch_assoc($result);
    $hoodTemp = $row['hoodTemp'];
  }

  # Get damper posn data:
  $sql = "SELECT damperPosn FROM PiBQ_Run ORDER BY tableKey DESC LIMIT 1";
  $result = mysqli_query($con,$sql);
  if(mysqli_num_rows($result) > 0) {
    $row = mysqli_fetch_assoc($result);
    $damperPosn = round(($row['damperPosn']/1100)*90,0);
  }
  mysql_close($con);
?>
<html>
<head>
 <title>PiBQ Home</title>
 <link href="css/style.css" type="text/css" rel="stylesheet" />
 <link href="https://fonts.googleapis.com/css?family=Patua+One" rel="stylesheet">
</head>
<body>
  <div id="wrapper">
    <div id="header">
      <a href="settings.php"><img id="imgSettings" src="img/settings.png" alt="settings.png" style="width:40px;height:40px;"></a>
      <span class="title">RPi BBQ</span>
      <img id="imgRPi" src="img/raspberry-pi-logo.png" alt="raspberry-pi-logo.png" style="width:40px;height:40px;">     
    </div>
    <div id="main">
      <div id="container">
      </div>
      <div id="updateTemp">


        <form action="updateTemp.php" method="post">
        <input id="setTemp" type="text" name="setTemp" value="<?= $setTemp ?>"/>
        <input type="submit" value="Set Temperature" />
        </form>
      </div>
    </div>
    <div id="footer">
      Footer
    </div>  
  </div>
</body>
</html>

我的chart.js

Highcharts.chart('container', {

    chart: {
        type: 'gauge',
        plotBackgroundColor: null,
        plotBackgroundImage: null,
        plotBorderWidth: 0,
        plotShadow: false
    },

    title: {
        text: 'Speedometer'
    },

    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%'
        }]
    },

    // the value axis
    yAxis: {
        min: 0,
        max: 200,

        minorTickInterval: 'auto',
        minorTickWidth: 1,
        minorTickLength: 10,
        minorTickPosition: 'inside',
        minorTickColor: '#666',

        tickPixelInterval: 30,
        tickWidth: 2,
        tickPosition: 'inside',
        tickLength: 10,
        tickColor: '#666',
        labels: {
            step: 2,
            rotation: 'auto'
        },
        title: {
            text: 'km/h'
        },
        plotBands: [{
            from: 0,
            to: 120,
            color: '#55BF3B' // green
        }, {
            from: 120,
            to: 160,
            color: '#DDDF0D' // yellow
        }, {
            from: 160,
            to: 200,
            color: '#DF5353' // red
        }]
    },

    series: [{
        name: 'Speed',
        data: [80],
        tooltip: {
            valueSuffix: ' km/h'
        }
    }]

},
// Add some life
function (chart) {
    if (!chart.renderer.forExport) {
        setInterval(function () {
            var point = chart.series[0].points[0],
                newVal,
                inc = Math.round((Math.random() - 0.5) * 20);

            newVal = point.y + inc;
            if (newVal < 0 || newVal > 200) {
                newVal = point.y - inc;
            }

            point.update(newVal);

        }, 3000);
    }
});

Answer 1

您错放了脚本标记。那些不在<html>元素之外。

在script标记中移动这3个<head>标记。那些是HighChart脚本文件。

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

然后将此位置放在页面末尾，就在</body>上方。这是实例化HighCharts的脚本。它必须在DOM中存在#container元素时执行...

<script type="text/javascript" src="scripts/chart.js"></script>

麻烦在html php页面中嵌入highcharts

1 个答案: