Обновление RGraph V5 - ошибка при получении контекста - PullRequest
Новая
       17

Обновление RGraph V5 - ошибка при получении контекста

0 голосов
/ 27 апреля 2019

У меня была рабочая трехмерная диаграмма, использующая версию 2107-10-1, в которой использовались изображения для оси у.Сейчас я пытаюсь использовать библиотеки версии 5, но получаю сообщение об ошибке: «Не удается прочитать свойство 'getContext' с нулевым значением в новом RGraph.Drawing.Image (RGraph.drawing.image.js: 64), которое:"context = this.canvas.getContext ('2d'); "

Я изменяю строку в библиотеке на 3d, чтобы соответствовать настройке варианта диаграммы 3d, и ошибка устраняется. Однако затем я получаю следующие ошибки: "Невозможно установить свойство 'shadowColor' для null в Object.RG.noShadow.RG.NoShadow (RGraph.common.core.js: 5155) в RGraph.Drawing.Image.draw.Draw (RGraph.drawing.image.js:490) "

Я прошёл через API, чтобы попытаться найти какие-либо различия в именах свойств, но мои навыки и понимание не велики.

Буду признателен за любую помощь или совет..

: -) 

    new RGraph.Bar({
        id: 'cvs',
        data: [ [0,5,5],[0,5,5],[0,5,5] ],
        options: {
        /******/
        variant: '3d',
        variantThreedAngle: 0,
        hmarginGrouped: 2,
        /*****/
            textFont: '"Courier New", Courier, monospace',
            titleFont: '"Courier New", Courier, monospace',
            labels:['Monday', 'Saturday', 'Sunday'] ,
            colors: [ '#3cb44b','#5484ed','#fbd75b' ],
            textSize: 11,
            title: 'Test Learner1: T1C1 W/B 22nd April 2019',
            titleSize: 11,
            titleColor:'#338833',
            titleX: 50,
            titleY: 25,
            titleHalign: 'Left',
            textAccessible: false,
            key: ['LabelOne','LabelTwo','LabelThree'], //['One','Two','Three','Four','Five'],
            keyPositionY: 470,
            keyPositionX: 0,
            gutterBottom: 65,
            gutterRight: 10,
            gutterTop: 40,
            gutterLeft: 70,
            keyPosition: 'gutter',
            keyTextSize: 9,
            numyticks: 2,
            ylabelsCount: 2,
            ymax: 10,
            ymin: 0,
            backgroundColor: 'white',
            labelsColor: 'green'            
            // end options
        }           
    }).draw().exec(function (obj)
    {
        var images = [
            'smileyimages/graphimages/smiley5.png','smileyimages/graphimages/smiley10.png','smileyimages/graphimages/smiley1.png',
        ];           
        var index = 0;
        obj.coordsText.forEach(function (val, key, arr)
        {
            if (val.tag === 'scale') {

                var x    = val.x,
                    y    = val.y,
                    text = val.text;

                var img = new RGraph.Drawing.Image({
                    id: 'cvs',
                    x: x,
                    y: y,
                    src: images[index],
                   options: {
                       halign: 'right',
                        valign: 'center'
                    }
                }).draw();

                index++;
            }
        });           
        obj.set({
            ylabels: true

        });
        RGraph.redraw();
    }).on('beforedraw', function (obj)
        {
            RGraph.clear(obj.canvas, 'white');
        });

1 Ответ

0 голосов
/ 27 апреля 2019

Я изменил ваш код для новых имен свойств.С этим кодом не забудьте обновить пути к изображениям. 

<script src="/libraries/RGraph.drawing.image.js"></script>
<script src="/libraries/RGraph.common.core.js"></script>
<script src="/libraries/RGraph.common.key.js"></script>
<script src="/libraries/RGraph.bar.js"></script>

И код, который составляет диаграмму: 

new RGraph.Bar({
    id: 'cvs',
    data: [ [1,5,5],[1,5,5],[1,5,5] ],
    options: {
        variant: '3d',
        hmargin: 20,
        hmarginGrouped: 2,
        textFont: '"Courier New", Courier, monospace',
        titleFont: '"Courier New", Courier, monospace',
        xaxis: false,
        xaxisLabels:['Monday', 'Saturday', 'Sunday'] ,
        colors: [ '#3cb44b','#5484ed','#fbd75b' ],
        title: 'Test Learner1: T1C1 W/B 22nd April 2019',
        titleX: 120,
        titleY: 25,
        titleHalign: 'Left',
        textAccessible: false,
        key: ['LabelOne','LabelTwo','LabelThree'], //['One','Two','Three','Four','Five'],
        keyPositionY: 435,
        keyPositionX: 100,
        marginBottom: 95,
        marginRight: 10,
        marginTop: 40,
        marginLeft: 100,
        keyPosition: 'margin',
        keyLabelsSize: 9,
        yaxis: false,
        yaxisLabelsCount: 2,
        yaxisScaleMax: 10,
        yaxisScaleMin: 0,
        backgroundColor: 'white',
        xaxisLabelsColor: 'green'
    }           
}).draw().exec(function (obj)
{
    var images = [
        '/images/alex.png',
        '/images/alert.png',
        '/images/facebook.png'
    ];

    var index = 0;

    obj.coordsText.forEach(function (val, key, arr)
    {

        if (val.tag === 'scale') {

            var x    = val.x,
                y    = val.y,
                text = val.text;

            var img = new RGraph.Drawing.Image({
                id: 'cvs',
                x: x,
                y: y + 10,
                src: images[index++],
               options: {
                    halign: 'right',
                    valign: 'center'
                }
            }).draw();
        }
    });

});

Здесь есть демонстрация диаграммы:

https://www.rgraph.net/tests/canvas.bar/so-question.html

...