自散点图扩展的自定义散点图变为折线图

Question

我无法找到解释，因此为什么我的自定义散点图会显示折线图。

我已经通过使用basic：]从散点图扩展了此自定义图表，

    Chart.defaults.scatterCustom = Chart.defaults.scatter;
    Chart.controllers.scatterCustom = Chart.controllers.scatter.extend({ ...
以下是我正在使用的完整代码和fiddle来说明我的问题。

我们可以看到3个差异图表，其中2个是默认散点图，一个是customScatter。

稍后添加了draw函数，以为它可以恢复正常的行为，但不会改变任何东西。

非常感谢您的帮助！

tidechart = {
    tideChart: "",

    initTidechart: function() {

        Chart.defaults.scatterCustom = Chart.defaults.scatter;
        Chart.controllers.scatterCustom = Chart.controllers.scatter.extend({
            draw: function(ease) {
                Chart.controllers.scatter.prototype.draw.call(this, ease);
            },
            fireSliderEvent: function(point, canvas, boundingRect) {
                var mouseX = Math.round((boundingRect.left + point._view.x) / (boundingRect.right - boundingRect.left) * canvas.width / this.chart.chart.currentDevicePixelRatio);
                var mouseY = Math.round((boundingRect.top + point._view.y) / (boundingRect.bottom - boundingRect.top) * canvas.height / this.chart.chart.currentDevicePixelRatio);
                var oEvent = document.createEvent('MouseEvents');
                oEvent.initMouseEvent('click', true, true, document.defaultView,
                    0, mouseX, mouseY, mouseX, mouseY,
                    false, false, false, false, 0, canvas);
                canvas.dispatchEvent(oEvent);
            },
            highlightPointsByIndex: function(datasetIndex, index) {
                var canvas = this.chart.canvas;
                var boundingRect = canvas.getBoundingClientRect();
                var points = this.chart.getDatasetMeta(datasetIndex).data;
                this.fireSliderEvent(points[index], canvas, boundingRect);
            },
            highlightPointsByValue: function(points, value) {
                var dataPoints = this._data;
                for (var index = 0; index < dataPoints.length; ++index) {
                    if (dataPoints[index].toString() === value.toString()) {
                        this.highlightPointsByIndex(points, index);
                        break;
                    }
                }
            }
        });

        tideChartOptions = {
            maintainAspectRatio: false,
            legend: {
                display: true
            },

            tooltips: {
                backgroundColor: '#f5f5f5',
                titleFontColor: '#333',
                bodyFontColor: '#666',
                bodySpacing: 4,
                xPadding: 12,
                mode: "nearest",
                intersect: 0,
                position: "nearest",
                filter: function(tooltipItem) {
                    return tooltipItem.datasetIndex != 0;
                }
            },
            responsive: true,
            scales: {
                yAxes: [{
                    scaleLabel: {
                        display: true,
                        labelString: 'Tide level'
                    },
                    gridLines: {
                        drawBorder: false,
                        color: 'rgba(29,140,248,0.0)',
                        zeroLineColor: "transparent",
                    },
                    ticks: {
                        suggestedMin: 0,
                        suggestedMax: 10,
                        padding: 20,
                        fontColor: "#9a9a9a"
                    },
                    afterTickToLabelConversion: function(q) {
                        for (var tick in q.ticks) {
                            q.ticks[tick] += ' m';
                        }
                    },
                }],

                xAxes: [{
                    display: true,
                    type: 'time',
                    time: {
                        parser: 'YYYY-MM-DD HH:mm:ss',
                        tooltipFormat: 'll HH:mm',
                        unit: 'day',
                        unitStepSize: 1,
                        displayFormats: {

                            'month': 'MMM DD'
                        }
                    },
                    gridLines: {
                        drawBorder: false,
                        color: 'rgba(225,78,202,0.1)',
                        zeroLineColor: "transparent",
                    },
                    ticks: {
                        padding: 20,
                        fontColor: "#9a9a9a"
                    }
                }]
            }
        };


        var data = {
            labels: ['01/01/2020','01/02/2020','01/03/2020','01/04/2020'],
            datasets: [
                {
                    label: 'Camera 1',
                    type: 'scatter',
                    fill: false,
                    backgroundColor: '#2DAAE1',
                    borderColor: '#2DAAE1',
                    borderWidth: 0,
                    pointBackgroundColor: '#2DAAE1',
                    pointHoverBackgroundColor: '#2DAAE1',
                    pointBorderWidth: 0,
                    pointHoverRadius: 5,
                    pointRadius: 2,
                    data: [1,5,6,7]
                },
                {
                    fill: false,
                    type: 'scatter',
                    label: 'Camera 2',
                    backgroundColor: '#FFC329',
                    borderColor: '#FFC329',
                    borderWidth: 2,
                    borderDash: [],
                    borderDashOffset: 0.0,
                    pointBackgroundColor: '#FFC329',
                    pointHoverBackgroundColor: '#FFC329',
                    pointBorderWidth: 0,
                    pointHoverRadius: 5,
                    pointRadius: 2,
                    data: [3,2,8,1]
                },
                {
                    fill: false,
                    type: 'scatterCustom',
                    label: 'Camera 3',
                    backgroundColor: '#FF5229',
                    borderColor: '#FF5229',
                    borderWidth: 2,
                    borderDash: [],
                    borderDashOffset: 0.0,
                    pointBackgroundColor: '#FF5229',
                    pointHoverBackgroundColor: '#FF5229',
                    pointBorderWidth: 0,
                    pointHoverRadius: 5,
                    pointRadius: 2,
                    data: [8,4,5,3]
                }
            ]
        };

        //tidechart.tideChart = new Chart(ctx, config);
        tidechart.tideChart = new Chart($("#tidechart"), {
            data: data,
            options: tideChartOptions
        });
    }
}

tidechart.initTidechart();

我无法找到解释，因此为什么我的自定义散点图会显示折线图。我已经通过使用以下基本散点图扩展了此自定义图表：....

Answer 1

这解决了它