我已经在Qualtrics中插入了一个我想问的问题的高图。受访者通过拖动线来回答这个问题。 我想添加一个按钮,将行的值重置为默认显示的初始值,或者显示特定值。 以下是问题的html元素
<div id="container" style="height: 400px"> </div>
<button id="button">Set new data</button>
这里是js
Qualtrics.SurveyEngine.addOnload(function()
{
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
animation: false
},
legend: {
enabled: false
},
xAxis: {
categories: ['1', '2', '3']
},
yAxis: {
min: -2,
max: 10,
tickInterval: 2,
lineWidth: 1,
title: {
text: '\% points'
},
},
plotOptions: {
series: {
point: {
events: {
drag: function (e) {
// Returning false stops the drag and drops. Example:
/*
if (e.newY > 300) {
this.y = 300;
return false;
}
*/
j('#drag').html(''
'Dragging <b>' + this.category + '</b> to <b>' + Highcharts.numberFormat(e.y,2) + '\% </b>');
},
drop: function () {
j('#drop').html(''
this.category + '</b> was set to <b>' + Highcharts.numberFormat((Math.ceil(this.y*20)/20),2) + '\% </b>');
}
}
},
tooltip: {
valueDecimals:2
},
stickyTracking: true,
getExtremesFromAll: true,
marker: {
radius: 6
}
},
/* line: {
cursor: 'ns-resize'
}*/
},
tooltip: {
yDecimals: 2
},
series: [{
data: [0, 0, 0],
dragMinY:-2,
dragMaxY:10,
draggableY: true,
cursor: 'ns-resize'
}],
});
j('#button1').click(function () {
chart.series[0].setData([5, 6, 2] );
});
j('#button2').click(function () {
chart.series[0].setData([0, 0, 0]);
});
});
(注意,由于Jquery(在标题中预加载)与原型冲突,我将$重置为j以防止冲突。)
现在,按钮应该工作,他们应该按照他们的意图行事,但有些事情很奇怪:如果我点击图表拖动线,第一个按钮会自动点击,我不明白为什么。如果我单击第二个,则单击。每次点击页面重新加载时,最糟糕的是什么。这仅适用于Qualtrics,我试图在jfiddle(https://jsfiddle.net/tg35u440/)中实现它,一切似乎都很好。 所以,你知道我实际上要做什么来阻止资格每次点击一个按钮时重新加载oage?为什么这些按钮与Qualtrics中的拖动功能产生冲突?
非常感谢!