RGraph : Uncaught TypeError: (intermediate value).draw(...).responsive 不是一个函数

Question

我想使用 RGraph 库为我的图表添加响应式，问题是每次我使用 responsive() 方法（来自库）https://www.rgraph.net/canvas/responsive.html

此错误消息总是出现，并且图表不会像往常一样呈现（在添加响应式方法之前，我的图表运行良好）

Uncaught TypeError: (intermediate value).draw(...).responsive 不是函数

这是我绘制图表的代码：

            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']
                }
            }
        ]);

仍在寻找解决方案，我在类似的问题上看到过，但它不能解决我的问题，感谢您的帮助，在此先感谢。

Answer 1

我稍微重新排列了您的代码 - 特别是现在有两种响应条件（一种用于大屏幕，一种用于小屏幕）。

这里有一个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']

        }
    }
]);