在素材

时间:2015-09-06 22:58:40

标签: javascript button highcharts draggable qualtrics

我已经在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/)中实现它,一切似乎都很好。 所以,你知道我实际上要做什么来阻止资格每次点击一个按钮时重新加载oage?为什么这些按钮与Qualtrics中的拖动功能产生冲突?

非常感谢!

0 个答案:

没有答案