Рисование диаграмм с помощью HighCharts js

109
18 августа 2018, 17:30

Решил изучить js framework HighCharts. Создал проект asp.net mvc. Скачал с нагета библиотеку Highsoft.Highcharts версии 6.1.0.53. И добавил свою вьюху к стандартному макету mvc. Код view:

@{
    ViewBag.Title = "Diagramm";
}
<script type="text/javascript">
    $(function () {
        chart1 = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                defaultSeriesType: 'column'
            },
            title: {
                text: 'Столбиковая диаграмма'
            },
            xAxis: {
                categories: ['Категория 1', 'Категория 2', 'Категория 3']
            },
            yAxis: {
                title: {
                    text: 'Ось значений'
                }
            },
            series: [{
                name: 'Значение 1',
                data: [1, 5, 4]
            }, {
                name: 'Значение 2',
                data: [5, 7, 3]
            }]
        });
    });
</script>
<h2>@ViewBag.Title</h2>

Дописал контроллер:

public ActionResult Diagramm()
        {
            return View();
        }

Добавил подключение библиотек на _Layout:

<script type="text/javascript" src="../../build/PP.js"></script>
    <script type="text/javascript" src="../../libs/jquery.js"></script>
    <script type="text/javascript" src="../../libs/hc/highcharts.src.js"></script>

И при запуске вылетает ошибка:

Uncaught ReferenceError: $ is not defined

Пример нашёл на просторах интернета. JS только начал изучать. Подскажите пожалуйста что я сейчас делаю не так. Хочется для начала увидеть хотя бы простенькую диаграмму. _Layout:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    <script type="text/javascript" src="../../build/PP.js"></script>
    <script type="text/javascript" src="../../libs/jquery.js"></script>
    <script type="text/javascript" src="../../libs/hc/highcharts.src.js"></script>
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                    <li>@Html.ActionLink("Diagramm", "Diagramm", "Home")</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

Ошибка:

jquery-3.3.1.js:3827 Uncaught Error: Highcharts error #13: www.highcharts.com/errors/13 at Object.a.error (highcharts.js:10) at a.Chart.getContainer (highcharts.js:254) at a.Chart.firstRender (highcharts.js:269) at a.Chart. (highcharts.js:245) at a.fireEvent (highcharts.js:31) at a.Chart.init (highcharts.js:244) at a.Chart.getArgs (highcharts.js:244) at new a.Chart (highcharts.js:243) at HTMLDocument. (Diagramm:51) at mightThrow (jquery-3.3.1.js:3534)

Новые подключения:

<script src="http://code.highcharts.com/highcharts.js"></script>
    <script src="http://code.highcharts.com/modules/data.js"></script>
    <script src="http://code.highcharts.com/modules/drilldown.js"></script>
Answer 1

jQuery должен подключаться раньше, чем использоваться. Вероятно, следуя лучшим практикам, вы добавили теги script ниже, чем RenderBody, из-за чего $(function() {...}) не может нормально отработать.

Попробуйте заменить на document.addEventListener('DOMContentLoaded', function() {...}) или же обернуть свои скрипты в Razor-section

_Layout.cshtml:

<html>
...
<body>
@RenderBody()
<script type="text/javascript" src="../../build/PP.js"></script>
<script type="text/javascript" src="../../libs/jquery.js"></script>
<script type="text/javascript" src="../../libs/hc/highcharts.src.js">
@RenderSection("ScriptsBottom", required: false)
</body>
</html>

MyView.cshtml:

...
@section ScriptsBottom {
    <script>
        $(function () {
            'use strict';
            ...
        });
    </script>
}
READ ALSO
Не получается подключить js framework Hightcharts
javascript

Не получается подключить js framework Hightcharts

Пытаюсь разобраться с библиотекой highchartsСоздал проект mvc

 119
Почему не срабатывает скрипт? Что я делаю не так?
javascript

Почему не срабатывает скрипт? Что я делаю не так?

Что я делаю не так, почему скрипт не срабатывает?

 120
Java REST, failed loading POST
javascript

Java REST, failed loading POST

Всем привет! Вообщем есть веб сайт, и есть Ресть веб сервисПри авторизации юзера, отправляется запрос на сервер по ссылке и все

 104
Не отображается список во Vue.js
javascript

Не отображается список во Vue.js

Всем приветСтолкнулся с такой проблемкой: есть методы, которые берут из json-файла данные, значение ключа кладут в один массив, а значение значения(значения...

 102