Symfony网页包“；“未定义高度图表”；_Symfony_Webpack_Highcharts

Symfony网页包“；“未定义高度图表”；

symfony webpack highcharts

Symfony网页包“；“未定义高度图表”；,symfony,webpack,highcharts,Symfony,Webpack,Highcharts,尝试在Symfony 4版本（使用Ob\HighchartsBundle）中修改highcharts的有效Symfony 3实现失败，javascript控制台报告失败未定义高度图表编辑：highcharts与纱线添加highcharts一起安装编辑2：如果将{{encore\u entry\u script\u tags（'highcharts'）}替换为，则显示图表。这表明失败有一些特定的原因模板包括： {% block javascripts %} {{ parent()

尝试在Symfony 4版本（使用Ob\HighchartsBundle）中修改highcharts的有效Symfony 3实现失败，javascript控制台报告失败

未定义高度图表

编辑：highcharts与

纱线添加highcharts一起安装

编辑2：如果将

{{encore\u entry\u script\u tags（'highcharts'）}

替换为

，则显示图表。这表明失败有一些特定的原因

模板包括：

{% block javascripts %}
    {{ parent() }}
    {{ encore_entry_script_tags('highcharts') }}
    <script type="text/javascript">
        {{ chart(chart) }}
    </script>
{% endblock javascripts %}

<script src="/build/highcharts.js"></script>
<script type="text/javascript">
    $(function () {
var linechart = new Highcharts.Chart({   <-this line triggers error
...

页面来源包括：

{% block javascripts %}
    {{ parent() }}
    {{ encore_entry_script_tags('highcharts') }}
    <script type="text/javascript">
        {{ chart(chart) }}
    </script>
{% endblock javascripts %}

<script src="/build/highcharts.js"></script>
<script type="text/javascript">
    $(function () {
var linechart = new Highcharts.Chart({   <-this line triggers error
...

添加您的

资产/js/highcharts.js

const Highcharts = require('highcharts/highcharts');  // or require('highcharts/highstock');
window.Highcharts = Highcharts;

Highcharts需要JQuery，别忘了启用它

// webpack.config.js
.autoProvidejQuery()

// assets/js/YOUR_MAIN_FILE.css
const $ = require('jquery');
global.$ = global.jQuery = $;

下面是我的安装跟踪

composer require encore
composer require ob/highcharts-bundle
yarn install
yarn add @symfony/webpack-encore --dev
yarn add jquery --dev
yarn add highcharts --dev
yarn encore dev

资源

编辑：

全新symfony安装上的完整配置

webpack.config.js

var Encore = require('@symfony/webpack-encore');

Encore
    // directory where compiled assets will be stored
    .setOutputPath('public/build/')
    // public path used by the web server to access the output path
    .setPublicPath('/build')
    /*
     * ENTRY CONFIG
     *
     * Add 1 entry for each "page" of your app
     * (including one that's included on every page - e.g. "app")
     *
     * Each entry will result in one JavaScript file (e.g. app.js)
     * and one CSS file (e.g. app.css) if you JavaScript imports CSS.
     */
    .addEntry('app', './assets/js/app.js')
    .addEntry('highcharts', './assets/js/highcharts.js')
    .enableSingleRuntimeChunk()
    .cleanupOutputBeforeBuild()
    .enableBuildNotifications()
    .enableSourceMaps(!Encore.isProduction())
    .enableVersioning(Encore.isProduction())
    .enableSassLoader()
    .autoProvidejQuery()
;

module.exports = Encore.getWebpackConfig();

package.json

{
    "devDependencies": {
        "@symfony/webpack-encore": "^0.22.4",
        "bootstrap": "^4.2.1",
        "highcharts": "^7.0.1",
        "jquery": "^3.3.1",
        "webpack-notifier": "^1.6.0"
    },
    "license": "UNLICENSED",
    "private": true,
    "scripts": {
        "dev-server": "encore dev-server",
        "dev": "encore dev",
        "watch": "encore dev --watch",
        "build": "encore production --progress"
    },
    "dependencies": {
        "node-sass": "^4.11.0",
        "sass-loader": "^7.1.0"
    }
}

assets/js/app.js

/*
 * Welcome to your app's main JavaScript file!
 *
 * We recommend including the built version of this JavaScript file
 * (and its CSS file) in your base layout (base.html.twig).
 */

require('../css/app.css');

const $ = require('jquery');
global.$ = global.jQuery = $;

assets/js/highcharts.js

const Highcharts = require('highcharts/highcharts');
window.Highcharts = Highcharts;

// place below your Highcharts customisation

模板/base.html.twig

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>{% block title %}Welcome!{% endblock %}</title>
        {% block stylesheets %}
            {# 'app' must match the first argument to addEntry() in webpack.config.js #}
            {{ encore_entry_link_tags('app') }}
        {% endblock %}
    </head>
    <body>
        {% block body %}{% endblock %}
        {% block javascripts %}
             {{ encore_entry_script_tags('app') }}
         {% endblock %}
    </body>
</html>

{% extends 'base.html.twig' %}

{% block title %}Highcharts Test{% endblock %}

{% block stylesheets %}
  {{ parent() }}
  {{ encore_entry_link_tags('highcharts') }}
{% endblock %}

{% block javascripts %}
  {{ parent() }}
  {{ encore_entry_script_tags('highcharts') }}
  <script type="text/javascript">
    {{ chart(chart) }}
  </script>
 {% endblock %}

{% block body %}
  <div id="linechart" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
{% endblock %}


{%block title%}欢迎光临！{%endblock%}
{%块样式表%}
{#'app'必须与webpack.config.js中addEntry（）的第一个参数匹配}
{{{encore_entry_link_tags（'app'）}
{%endblock%}
{%block body%}{%endblock%}
{%block javascripts%}
{{{encore_entry_script_tags（'app'）}
{%endblock%}

模板/highcharts/index.html.twig

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>{% block title %}Welcome!{% endblock %}</title>
        {% block stylesheets %}
            {# 'app' must match the first argument to addEntry() in webpack.config.js #}
            {{ encore_entry_link_tags('app') }}
        {% endblock %}
    </head>
    <body>
        {% block body %}{% endblock %}
        {% block javascripts %}
             {{ encore_entry_script_tags('app') }}
         {% endblock %}
    </body>
</html>

{% extends 'base.html.twig' %}

{% block title %}Highcharts Test{% endblock %}

{% block stylesheets %}
  {{ parent() }}
  {{ encore_entry_link_tags('highcharts') }}
{% endblock %}

{% block javascripts %}
  {{ parent() }}
  {{ encore_entry_script_tags('highcharts') }}
  <script type="text/javascript">
    {{ chart(chart) }}
  </script>
 {% endblock %}

{% block body %}
  <div id="linechart" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
{% endblock %}

{%extends'base.html.twig%}
{%block title%}高位图表测试{%endblock%}
{%块样式表%}
{{parent（）}}
{{{encore_entry_link_tags（'highcharts'）}
{%endblock%}
{%block javascripts%}
{{parent（）}}
{{{encore_entry_script_tags（'highcharts'）}
{{图表（图表）}
{%endblock%}
{%block body%}
{%endblock%}

src/Controller/HighchartsController.php

<?php

namespace App\Controller;

use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\Routing\Annotation\Route;
use Ob\HighchartsBundle\Highcharts\Highchart;

class HighchartsController extends AbstractController
{
    /**
     * @Route("/highcharts", name="highcharts")
     */
    public function index()
    {
        // Chart
        $series = array(
            array("name" => "Data Serie Name",    "data" => array(1,2,4,5,6,3,8))
        );

        $ob = new Highchart();
        $ob->chart->renderTo('linechart');  // The #id of the div where to render the chart
        $ob->title->text('Chart Title');
        $ob->xAxis->title(array('text'  => "Horizontal axis title"));
        $ob->yAxis->title(array('text'  => "Vertical axis title"));
        $ob->series($series);

        return $this->render('highcharts/index.html.twig', [
            'controller_name' => 'HighchartsController',
            'chart' => $ob,
        ]);
    }
}

添加您的资产/js/highcharts.js

const Highcharts = require('highcharts/highcharts');  // or require('highcharts/highstock');
window.Highcharts = Highcharts;

Highcharts需要JQuery，别忘了启用它
// webpack.config.js
.autoProvidejQuery()

// assets/js/YOUR_MAIN_FILE.css
const $ = require('jquery');
global.$ = global.jQuery = $;

下面是我的安装跟踪
composer require encore
composer require ob/highcharts-bundle
yarn install
yarn add @symfony/webpack-encore --dev
yarn add jquery --dev
yarn add highcharts --dev
yarn encore dev

资源


编辑：
全新symfony安装上的完整配置
webpack.config.js
var Encore = require('@symfony/webpack-encore');

Encore
    // directory where compiled assets will be stored
    .setOutputPath('public/build/')
    // public path used by the web server to access the output path
    .setPublicPath('/build')
    /*
     * ENTRY CONFIG
     *
     * Add 1 entry for each "page" of your app
     * (including one that's included on every page - e.g. "app")
     *
     * Each entry will result in one JavaScript file (e.g. app.js)
     * and one CSS file (e.g. app.css) if you JavaScript imports CSS.
     */
    .addEntry('app', './assets/js/app.js')
    .addEntry('highcharts', './assets/js/highcharts.js')
    .enableSingleRuntimeChunk()
    .cleanupOutputBeforeBuild()
    .enableBuildNotifications()
    .enableSourceMaps(!Encore.isProduction())
    .enableVersioning(Encore.isProduction())
    .enableSassLoader()
    .autoProvidejQuery()
;

module.exports = Encore.getWebpackConfig();

package.json
{
    "devDependencies": {
        "@symfony/webpack-encore": "^0.22.4",
        "bootstrap": "^4.2.1",
        "highcharts": "^7.0.1",
        "jquery": "^3.3.1",
        "webpack-notifier": "^1.6.0"
    },
    "license": "UNLICENSED",
    "private": true,
    "scripts": {
        "dev-server": "encore dev-server",
        "dev": "encore dev",
        "watch": "encore dev --watch",
        "build": "encore production --progress"
    },
    "dependencies": {
        "node-sass": "^4.11.0",
        "sass-loader": "^7.1.0"
    }
}

assets/js/app.js
/*
 * Welcome to your app's main JavaScript file!
 *
 * We recommend including the built version of this JavaScript file
 * (and its CSS file) in your base layout (base.html.twig).
 */

require('../css/app.css');

const $ = require('jquery');
global.$ = global.jQuery = $;

assets/js/highcharts.js
const Highcharts = require('highcharts/highcharts');
window.Highcharts = Highcharts;

// place below your Highcharts customisation

模板/base.html.twig
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>{% block title %}Welcome!{% endblock %}</title>
        {% block stylesheets %}
            {# 'app' must match the first argument to addEntry() in webpack.config.js #}
            {{ encore_entry_link_tags('app') }}
        {% endblock %}
    </head>
    <body>
        {% block body %}{% endblock %}
        {% block javascripts %}
             {{ encore_entry_script_tags('app') }}
         {% endblock %}
    </body>
</html>

{% extends 'base.html.twig' %}

{% block title %}Highcharts Test{% endblock %}

{% block stylesheets %}
  {{ parent() }}
  {{ encore_entry_link_tags('highcharts') }}
{% endblock %}

{% block javascripts %}
  {{ parent() }}
  {{ encore_entry_script_tags('highcharts') }}
  <script type="text/javascript">
    {{ chart(chart) }}
  </script>
 {% endblock %}

{% block body %}
  <div id="linechart" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
{% endblock %}


{%block title%}欢迎光临！{%endblock%}
{%块样式表%}
{#'app'必须与webpack.config.js中addEntry（）的第一个参数匹配}
{{{encore_entry_link_tags（'app'）}
{%endblock%}
{%block body%}{%endblock%}
{%block javascripts%}
{{{encore_entry_script_tags（'app'）}
{%endblock%}

模板/highcharts/index.html.twig
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>{% block title %}Welcome!{% endblock %}</title>
        {% block stylesheets %}
            {# 'app' must match the first argument to addEntry() in webpack.config.js #}
            {{ encore_entry_link_tags('app') }}
        {% endblock %}
    </head>
    <body>
        {% block body %}{% endblock %}
        {% block javascripts %}
             {{ encore_entry_script_tags('app') }}
         {% endblock %}
    </body>
</html>

{% extends 'base.html.twig' %}

{% block title %}Highcharts Test{% endblock %}

{% block stylesheets %}
  {{ parent() }}
  {{ encore_entry_link_tags('highcharts') }}
{% endblock %}

{% block javascripts %}
  {{ parent() }}
  {{ encore_entry_script_tags('highcharts') }}
  <script type="text/javascript">
    {{ chart(chart) }}
  </script>
 {% endblock %}

{% block body %}
  <div id="linechart" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
{% endblock %}

{%extends'base.html.twig%}
{%block title%}高位图表测试{%endblock%}
{%块样式表%}
{{parent（）}}
{{{encore_entry_link_tags（'highcharts'）}
{%endblock%}
{%block javascripts%}
{{parent（）}}
{{{encore_entry_script_tags（'highcharts'）}
{{图表（图表）}
{%endblock%}
{%block body%}
{%endblock%}

src/Controller/HighchartsController.php
<?php

namespace App\Controller;

use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\Routing\Annotation\Route;
use Ob\HighchartsBundle\Highcharts\Highchart;

class HighchartsController extends AbstractController
{
    /**
     * @Route("/highcharts", name="highcharts")
     */
    public function index()
    {
        // Chart
        $series = array(
            array("name" => "Data Serie Name",    "data" => array(1,2,4,5,6,3,8))
        );

        $ob = new Highchart();
        $ob->chart->renderTo('linechart');  // The #id of the div where to render the chart
        $ob->title->text('Chart Title');
        $ob->xAxis->title(array('text'  => "Horizontal axis title"));
        $ob->yAxis->title(array('text'  => "Vertical axis title"));
        $ob->series($series);

        return $this->render('highcharts/index.html.twig', [
            'controller_name' => 'HighchartsController',
            'chart' => $ob,
        ]);
    }
}

添加.addPlugin（…
导致引用错误：未定义webpack
。我不准备修改第三方的代码。我编辑了帖子。您是否在“assets/js/highcharts.js”中尝试过所需的highcharts？应该没有必要对highcharts代码进行黑客攻击。过去不需要这样做。您能提供Symfony的详细参考信息吗这就是为什么要破解代码？问题已经被编辑以显示使用highcharts cdn的效果。这不是对highcharts代码的破解。{{encore_entry_script_tags（'highcharts'）}
调用您在项目/assets/js/highcharts.js
中创建的文件，而不是highcharts本身。此文件是由addEntry创建的（'highcharts'，'./assets/js/highcharts.js'）
在您的webpack.conf.js
中。此方法创建一个单独的文件，您可以在特定模板中调用。这是您的选择。我将此文件指向所需的highcharts库，您必须这样做才能避免错误消息。添加.addPlugin（…
导致引用错误：未定义webpack
。我不准备修改第三方的代码。我编辑了帖子。您是否在“assets/js/highcharts.js”中尝试过所需的highcharts？应该没有必要对highcharts代码进行黑客攻击。过去不需要这样做。您能提供Symfony的详细参考信息吗这就是为什么要破解代码？问题已经被编辑以显示使用highcharts cdn的效果。这不是对highcharts代码的破解。{{encore_entry_script_tags（'highcharts'）}
调用您在项目/assets/js/highcharts.js
中创建的文件，而不是highcharts本身。此文件是由addEntry创建的（'highcharts'，'./assets/js/highcharts.js'）
在您的webpack.conf.js
中。此方法创建一个单独的文件，您可以在特定模板中调用。这是您的选择。我将此文件指向所需的highcharts库，您必须这样做以避免错误消息。