0

我在 qualtrics 中插入了一个高图来解决我想问的问题。受访者通过拖动线条来回答问题。我想添加一个按钮来将行的值重置为我将它们显示为默认值的初始值，或者显示它们的特定值。这是问题的html元素

<div id="container" style="height: 400px">&nbsp;</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/）中实现它，一切似乎都很好。那么，您知道我实际上必须做些什么来防止每次单击按钮时 qualtrics 重新加载 oage 吗？为什么按钮会与 Qualtrics 屏幕上的拖动功能产生冲突？

非常感谢！

4

0 回答 0