javascript - 在 Qualtrics 中使用 Chart.js 的可拖动条形图

Question

我正在尝试使用 Qualtrics（调查平台）中的 JavaScript 以及 Chart.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>

2. 在我希望图表出现的问题中，在 html 模式下：

<canvas height="400" id="myChart" width="400">&nbsp;</canvas>

3. 问题中的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,
                        },
                    },
                ],
            },
        },
    });
});

奇怪的是我不能拖动条。有什么建议么？

标签： javascriptchart.jsqualtrics