Jqplot - Невозможно прочитать свойство 'startAngle' из неопределенного - PullRequest
Новая
       29

Jqplot - Невозможно прочитать свойство 'startAngle' из неопределенного

1 голос
/ 18 октября 2019

Я пытаюсь отобразить круговую диаграмму с помощью плагина jqPlot в Laravel.Jqplot-скрипты скомпилированы в основной файл app.js с миксом laravel.

Ошибки, которые я получаю:

jQuery.Deferred исключение:
Невозможно прочитать свойство 'startAngle' из неопределенного TypeError: Невозможно прочитать свойство 'startAngle' из неопределенного (вdoDraw)



функция doDraw (из app.js): 

function doDraw(rad) {
            // Fix for IE and Chrome that can't seem to draw circles correctly.
            // ang2 should always be <= 2 pi since that is the way the data is converted.
            // 2Pi = 6.2831853, Pi = 3.1415927
            if (ang2 > 6.282 + this.startAngle) {     **it fails on this if statement**
                ang2 = 6.282 + this.startAngle;
                if (ang1 > ang2) {
                    ang1 = 6.281 + this.startAngle;
                }
            }
            // Fix for IE, where it can't seem to handle 0 degree angles.  Also avoids
            // ugly line on unfilled pies.
            if (ang1 >= ang2) {
                return;
            }

            ctx.beginPath();
            ctx.fillStyle = color;
            ctx.strokeStyle = color;
            ctx.lineWidth = lineWidth;
            ctx.arc(0, 0, rad, ang1, ang2, false);
            ctx.lineTo(0, 0);
            ctx.closePath();

            if (fill) {
                ctx.fill();
            } else {
                ctx.stroke();
            }
        }

Код для круговой диаграммы : 

<div id="pie_seminar{{ $seminar->id }}" class="piechart"></div>

<script>
    var id, plot;
    $(document).ready(function () {
        id = '{{ $seminar->id }}';
        var plot{{ $seminar->id }} = $.jqplot('pie_seminar' + id, [[['Attempted',{{ $statisticResult['incomplete'] }}], ['Completed',{{ $statisticResult['completed'] }}]]], {
            gridPadding: {top: 1, right: 1, bottom: 1, left: 1},
            grid: {
                drawBorder: false,
                drawGridlines: false,
                background: '#ffffff',
                shadow: false
            },
            seriesDefaults: {
                renderer: $.jqplot.PieRenderer,

                rendererOptions: {
                    sliceMargin: 3,
                    // rotate the starting position of the pie around to 12 o'clock.
                    startAngle: -90,
                    showDataLabels: true,
                    diameter: null,
                    padding: 8,
                    margin: 1
                },
                trendline: {show: false}
            },
            legend: {
                show: false,
            },
            highlighter: {
                tooltipContentEditor: function (str, seriesIndex, pointIndex) {
                    return str;
                },
                show: false,
                useAxesFormatters: false,
                tooltipFormatString: '%s'
            },
            seriesColors: ["#cccccc", "#aaccff", "#F5811F"]
        });
    });
</script>

Мне удалось отобразить плагин круговой диаграммы, вручную импортировав сценарии в общую папку (что не является решением, поскольку все сценарии необходимо скомпилировать в один файл). ), так что это показывает, что код должен быть в порядке.

Перекомпиляция ресурсов с использованием смеси Laravel не решила проблему. Код продолжает падать при неопределенной ошибке startAngle. Я схожу с ума с jqplot. В чем здесь проблема?

1 Ответ

0 голосов
/ 04 ноября 2019

Поскольку скомпилированный скрипт в app.js зависал от функции doDraw (переменная startAngle была недоступна), модификация функции doDraw сделала то же самое. startAngle переменная объявлена ​​ глобально в doDraw функция и в шаблоне блейдатакже как startAngle , так что переменная получает глобальный доступ для каждой сгенерированной круговой диаграммы jqPlot . Конечно, после компиляции активов через npm запустите dev / production .

...