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

Question

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

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

未捕获类型错误：(中间值(.draw(…(.responsed不是函数

这是我绘制图表的代码：

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

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

这里有一个代码笔：

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