代码之家 › 专栏 › 技术社区 › Reihandio

RGraph:未捕获类型错误:(中间值).draw(…).response不是函数

rgraph javascript

Reihandio · 技术社区 · 5 年前

我想使用RGraph库为我的图表添加一个响应,问题是每次我使用response()方法(来自库)时 https://www.rgraph.net/canvas/responsive.html

这个错误消息总是会出现,图表不会像往常一样呈现(在添加响应方法之前,我的图表工作得很好)

Uncaught TypeError:(中间值).draw(…).response不是函数

这是我绘制图表的代码:

            twgScatter = new RGraph.SVG.Scatter({
            id: 'chart-containertwc',
            data: dataset1,
            options: {
            marginTop: 80,
                hmargin: 35,
                xaxisScaleMax: 80,
                backgroundGrid: true,
                colors: ['#41a827', '#2d79c4'],
                title: 'Total Wage Change (%)',
                xaxisLabels: ['Rank & File', 'Junior \n Management', 'Senior \n Management', 'All Employees'],
                key: ['Benchmark Group', 'Your Organisation'],
                keyTextSize: 11,
                keyColorShape: 'circle',
                keyPosition: 'margin',
                keyOffsetx: 30,
                keyOffsety: -60,
                xaxis: false,
                backgroundGridVlines: false,
                backgroundGridBorder: false,
                backgroundGrid: false,
                yaxis: false,
                yaxisLabelsOffsetx: 25,
                titleSize: 12,
                titleBold: true,
                labelsAbove: true,
                labelsAboveSize: 10,
                labelsAboveBold: false,
                xaxisLabelsSize: 10,
                yaxisLabelsSize: 10,
                titleY: 55,
                tickmarksStyle: 'circle',
                tickmarksSize: 10,
                yaxisScaleMin: yaxisNegative,
                yaxisScaleMax: yaxisPositive,
                yaxisLabelsOffsetx: 25,
                yaxisLabelsOffsety: -10,
                yaxisLabelsColor: "#6f7373"
            }
        }).draw().responsive([
            {
                maxWidth: 321,
                options: {
                    xaxisLabels: ['Test', 'Junior \n Management', 'Senior \n Management', 'All Employees']
                }
            }
        ]);

仍在寻找解决方案,我在一个类似的问题上看到了它,但它并不能解决我的问题,感谢您的帮助,提前感谢。

0 回复 | 直到 5 年前

Richard 5 年前

我稍微重新排列了你的代码——特别是现在有两个响应条件(一个用于大屏幕,一个用于小屏幕)。

这里有一个codepen:

https://codepen.io/rgraph/pen/YzpoOrN

其代码如下:

dataset1 = [{x:16,y:12},{x:45,y:12},{x:45,y:69},{x:42,y:59},{x:13,y:26},{x:43,y:12},{x:26,y:43}];
dataset2 = [{x:1,y:12},{x:2,y:12},{x:3,y:69},{x:4,y:59},{x:5,y:26},{x:6,y:12},{x:7,y:43}];

twgScatter = new RGraph.SVG.Scatter({
    id: 'cc',
    data: [dataset1, dataset2],
    options: {
        marginTop: 80,
        marginBottom: 80,
        backgroundGrid: true,
        colors: ['#41a827', '#2d79c4'],
        title: 'Total Wage Change (%)',
        key: ['Benchmark Group', 'Your Organisation'],
        keyTextSize: 11,
        keyColorShape: 'circle',
        keyPosition: 'margin',
        keyOffsetx: 30,
        keyOffsety: -60,
        //xaxis: false,
        backgroundGridVlines: false,
        backgroundGridBorder: false,
        backgroundGrid: false,
        //yaxis: false,
        //yaxisLabelsOffsetx: 25,
        titleSize: 12,
        titleBold: true,
        //labelsAbove: true,
        //labelsAboveSize: 10,
        //labelsAboveBold: false,
        xaxisLabelsSize: 10,
        titleY: 55,
        tickmarksStyle: 'circle',
        tickmarksSize: 10,
        //yaxisLabelsOffsetx: 25,
        //yaxisLabelsOffsety: -10,
        yaxisLabelsColor: "#6f7373",
        xaxisScaleMax: 80,
        yaxisScaleMin: -25,
        yaxisScaleMax: 100,
    }
}).draw().responsive([
    {
        maxWidth: null,
        options: {
            xaxisLabels: ['Rank & File', 'Junior \n Management', 'Senior \n Management', 'All Employees']
        }
    },
    {
        maxWidth: 600,
        options: {
            xaxisLabels: ['Test', 'Junior \n Management', 'Senior \n Management', 'All Employees']

        }
    }
]);