Веб-пакет Symfony "Highcharts не определен"

Question

Попытки изменить работающую реализацию больших диаграмм в Symfony 3 в версии Symfony 4 (с использованием Ob \ HighchartsBundle) потерпели неудачу с отчетами консоли javascript

Highcharts не определено

Редактировать: highcharts устанавливается с 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 public\build
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();

Answer 1

Добавьте в свой 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 и устаревшие приложения

Highcharts # 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();

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

активы / 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 = $;

активы / 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>

шаблоны / Highcharts / index.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 / контроллер / 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,
        ]);
    }
}