Question

我有一个使用版本2107-10-1的有效3d图表，该图表将图像用于y轴。我现在正在尝试使用版本5库，但出现错误： “无法在新的RGraph.Drawing.Image（RGraph.drawing.image.js：64）上读取null的属性'getContext' 这是： “ 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尝试查找与属性名称的任何差异，但是我的技能和理解不是很好。

任何帮助或建议，将不胜感激。

：-）

FROM openjdk:8 as stage0
WORKDIR /opt/docker
COPY opt /opt
USER root
RUN ["chmod", "-R", "u=rX,g=rX", "/opt/docker"]
RUN ["chmod", "u+x,g+x", "/opt/docker/bin/serveraktor"]

FROM openjdk:8
USER root
RUN id -u demiourgos728 2> /dev/null || useradd --system --create-home --uid         
1001 --gid 0 demiourgos728
WORKDIR /opt/docker
COPY --from=stage0 --chown=demiourgos728:root /opt/docker /opt/docker
USER 1001
ENTRYPOINT ["/opt/docker/bin/serveraktor"]
CMD []

Answer 1

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

<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

Answer 2

精彩-非常感谢。它很有效-我会花很多时间试图弄清楚。：-）

RGraph V5升级-获取上下文错误

2 个答案: