Перетаскиваемая гистограмма с использованием диаграммы. js в Qualtrics - PullRequest
Новая
       19

Перетаскиваемая гистограмма с использованием диаграммы. js в Qualtrics

0 голосов
/ 28 марта 2020

Я пытаюсь создать диаграмму перетаскивания, используя JavaScript в Qualtrics (платформа для проведения опросов), с диаграммой. js и плагином dragData. Я вижу, что график в мыши идеально превращается в руку, когда я кладу ее в полосу (как и должно быть), но полосы не перетаскиваются. Я не знаю, в чем проблема. Вот шаги:

  1. В Qualtrics, в шапке, во внешнем виде, (html форма) я пишу: 
<script src = "https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-dragdata@latest/dist/chartjs-plugin-dragdata.min.js"></script>
В вопросе, где я хочу отображать график, в режиме html: 
<canvas height="400" id="myChart" width="400">&nbsp;</canvas>
Код javascript в вопросах: 
Qualtrics.SurveyEngine.addOnReady(function() {
    var ctx = document.getElementById('myChart').getContext('2d');

    var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: [
                'Africa',
                'Asia',
                'Europe',
                'Latin America',
                'North America',
            ],
            datasets: [
                {
                    label: 'Population (millions)',
                    backgroundColor: [
                        '#3e95cd',
                        '#8e5ea2',
                        '#3cba9f',
                        '#e8c3b9',
                        '#c45850',
                    ],
                    data: [2478, 5267, 734, 784, 433],
                },
            ],
        },

        options: {
            dragData: true,
            dragDataRound: 1,
            dragOptions: {
                showTooltip: true,
            },
            onDragStart: function(e, element) {
                // console.log(e)
            },
            onDrag: function(e, datasetIndex, index, value) {
                e.target.style.cursor = 'grabbing';
                // console.log(datasetIndex, index, value)
            },
            onDragEnd: function(e, datasetIndex, index, value) {
                e.target.style.cursor = 'default';
                // console.log(datasetIndex, index, value)
            },
            hover: {
                onHover: function(e) {
                    const point = this.getElementAtEvent(e);
                    if (point.length) e.target.style.cursor = 'grab';
                    else e.target.style.cursor = 'default';
                },
            },

            scales: {
                yAxes: [
                    {
                        ticks: {
                            max: 6000,
                            min: 0,
                        },
                    },
                ],
            },
        },
    });
});

Странно, что я не могу перетащить бары. Какие-либо предложения?

...