0

我有一个使用版本 2107-10-1 的工作 3d 图表，它使用图像作为 y 轴。我现在正在尝试使用版本 5 库，但出现错误：“无法在新的 RGraph.Drawing.Image (RGraph.drawing.image.js:64) 读取属性 'getContext' of null 是：”上下文 = this.canvas.getContext('2d');"

我将库中的行更改为 3d 以匹配 3d 的图表变体设置，错误已解决。但是，然后我收到以下错误：“无法在 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');
        });
4

1 回答 1

0

我已经针对新的属性名称调整了您的代码。使用此代码，请记住更新图像的路径。

<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();
        }
    });

});
于 2019-04-27T09:10:16.383 回答