Symfony webpack "Highcharts is not defined"

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

未定义高图

编辑：高图表安装yarn add highcharts。

编辑 2：如果{{ encore_entry_script_tags('highcharts') }}替换为<script src="//code.highcharts.com/highcharts.js"></script>则显示图表。这表明失败有一些特定于Symfony的原因。

模板包括：

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

yarn encore dev显示：

 I  15 files written to publicbuild
Entrypoint app [big] = runtime.js app.css app.js
Entrypoint highcharts [big] = runtime.js highcharts.js
Entrypoint _tmp_copy = runtime.js
Done in 11.91s.

页面源包括：

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

webpack.conf.js：

var Encore = require('@symfony/webpack-encore');
Encore
        .setOutputPath('public/build/')
        .setPublicPath('/build')
        .cleanupOutputBeforeBuild()
        .enableSourceMaps(!Encore.isProduction())
        .addEntry('app', './assets/js/app.js')
        .addEntry('highcharts', './assets/js/highcharts.js')
        .enableSingleRuntimeChunk()
         .enableSassLoader()
        .autoProvidejQuery()
        .copyFiles({
            from: './assets/images'
        })
        ;
module.exports = Encore.getWebpackConfig();

添加您的assets/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

资源

jQuery 插件和遗留应用程序

高图表 #4994

编辑：

全新 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();

包.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"
    }
}

资产/JS/应用程序.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

模板/基础.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>

模板/高图表/索引.html.twig

{% 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 %}

src/Controller/HighchartsController.php

<?php
namespace AppController;
use SymfonyBundleFrameworkBundleControllerAbstractController;
use SymfonyComponentRoutingAnnotationRoute;
use ObHighchartsBundleHighchartsHighchart;
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,
        ]);
    }
}

相关内容

最新更新

热门标签：