Question

我正在学习更多关于PHP和Javascript的知识。我想为一个我从头开始制作的项目使用一个漂亮的图表解决方案，但它是在Javascript中，我仍然在使用Javascript一般的耳朵后面很潮湿。为什么我的图表没有加载#container标签位于我的PHP页面上的位置？

我在这里有一个MVC布局，其中index.php调用登录页面或未登录页面。登录页面是我的图表存在且未加载的页面。

我的PHP页面工作得很好。我已将所有脚本包含在我的_footer.php文件中，该文件包含在页面底部的PHP中。以下是我的页脚文件的样子。它有一个基础，一个共同的前端框架，我的highcharts / highstocks脚本包含我验证在test.html页面上工作的示例高清图表示例。

_footer.php

<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script src="js/highstocks/highstock.js"></script>
<script src="js/highstocks/modules/exporting.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>

<script>
  $(document).foundation();
</script>

<script>
$(function () { 
   $('#container').highcharts({
    chart: {
        type: 'bar'
    },
    title: {
        text: 'Fruit Consumption'
    },
    xAxis: {
        categories: ['Apples', 'Bananas', 'Oranges']
    },
    yAxis: {
        title: {
            text: 'Fruit eaten'
        }
    },
    series: [{
        name: 'Jane',
        data: [1, 0, 4]
    }, {
        name: 'John',
        data: [5, 7, 3]
    }]
  });
 });
</script>

这是#container div所在的登录页面，应该加载图表。

logged_in.php

<?php include('_header.php'); ?>
<div>
    <a href="index.php?logout"><?php echo WORDING_LOGOUT; ?></a>
    <a href="edit.php"><?php echo WORDING_EDIT_USER_DATA; ?></a>
</div>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Test Page</title>
    <link rel="stylesheet" href="css/foundation.css" />
    <script src="js/vendor/modernizr.js"></script>
  </head>
  <body>
<div class ="test-canvas">
  <div class="off-canvas-wrap" data-offcanvas>
  <div class="inner-wrap">
    <nav class="tab-bar">
      <section class="left-small">
        <a class="left-off-canvas-toggle menu-icon" href="#"><span></span></a>
      </section>

      <section class="middle tab-bar-section">
        <h1 class="title">Test Menue</h1>
      </section>

      <section class="right-small">
        <a class="right-off-canvas-toggle menu-icon" href="#"><span></span></a>
      </section>
    </nav>

    <aside class="left-off-canvas-menu">
      <ul class="off-canvas-list">
        <li><label>Test Menu</label></li>
        <li><a href="#">Home</a></li>
      </ul>
    </aside>

    <aside class="right-off-canvas-menu">
      <ul class="off-canvas-list">
        <li><label>Users</label></li>
        <li><a href="#">Test User</a></li>
      </ul>
    </aside>

    <section class="main-section">
        <div id="container" style="width:100%; height:400px;"></div>
    </section>

  <a class="exit-off-canvas"></a>

  </div>
</div>
</div>
<?php include('_footer.php'); ?>

Answer 1

使用框架的一个常见问题是$ variable已被使用。

有些事情要尝试：

使用jQuery（记得包含）

jQuery(function($){ 
  $('#container').highcharts({
...

确保您的global.css.scss文件与您的Foundation版本匹配
重新编译您的SASS文件（删除如果不起作用且不必要）

Answer 2

我的错误。

highcharts脚本包含在header.php文件中的多个位置。它被包含在页眉和页脚中，它没有加载图表。我删除了头文件中的include并且图表工作正常。

人为错误，但想通了。：）

Answer 3

每当发生这种情况时，您的PHP with Highcharts页面仍然会自动加载图表。只有include失败了。

解决方案：转到Highcharts PHP并编辑此行：

$(function () {

并使它看起来像这样：

$(function ($) {

最后你应该有这样的东西，然后刷新：

$(function ($) {
    $('#conq').highcharts({
        chart: {
            type: 'spline' //-your chart type//
        },`
    });
});

为什么Highcharts不能在PHP中工作？

3 个答案: