ChartJS, Primeng, Gap first and end of line 图表

Question

我正在使用使用 chartjs 的 primeng 图表组件。我们正在使用 chartjs 2.5.0 以及 primeng 4.0 和 angular 4。我创建了一个动态图表，并在数据通过某些服务传给我们后将其放入图表中。问题是，过一会儿 chartjs 会在图表的开头和结尾处留出一个缺口。这是我们的 chartjs 选项：

this.options = {
        responsive: true,
        tooltips: {
            mode: 'index',
            intersect: false,           // all points in chart to show tooltip
            callbacks: {                // adding labels as title in tooltip
                title: function(tooltipItems, data) {
                    let date = tooltipItems[0].xLabel;
                    return me._rhDatePipe.transform(date, 'time');
                }
            }
        },
        hover : {
            mode: 'index',
            intersect: false
        },
        scales: {
            xAxes: [{
                type: 'time',
                display: false,          // preventing labels from being displayed
                max: 20
            }],
            yAxes: [{
                ticks: {
                    maxTicksLimit: 3
                }
            }]
        }
    }

这是我们的第一个数据设置：

this.data = {
        labels: this.labels,            // current time as label
        datasets: [
            {
                label: me._messageService.translate('chart-label-buy'),
                data: this.buyingData,
                fill: false,
                borderColor: "#2453db",
                lineTension: 0,
                borderWidth: 1.5,
                radius: 0               // removing dot points on chart
            },
            {
                label: me._messageService.translate('chart-label-sale'),
                data: this.sellingData,
                fill: false,
                borderColor: "#f44336",
                borderWidth: 1.5,
                lineTension: 0,
                radius: 0               // removing dot points on chart
            },
            {
                label: me._messageService.translate('chart-label-last-trade'),
                data: this.lastPriceData,
                fill: false,
                borderColor: "#000000",
                lineTension: 0,
                borderWidth: 1.5,
                radius: 0               // removing dot points on chart
            }
        ]
    }

这是更新图表的循环：

if(sortedKeysList != null) {

        for(let key in sortedKeysList) {
            let currentTime: number = sortedKeysList[key];
            // just add new points
            if(!this.currentTimes.includes(currentTime)) {
                let date = new Date(currentTime);
                this.labels.push(date);
                this.currentTimes.push(currentTime);
                this.buyingData.push(this.bestLimitsChart[currentTime].buy);
                this.sellingData.push(this.bestLimitsChart[currentTime].sale);
                if(this.bestLimitsChart[currentTime].price != 0)
                    this.lastPriceData.push(this.bestLimitsChart[currentTime].price);
                else
                    this.lastPriceData.push(null);
                this.updateChart();
            }
        }
    }

及图表图片：

不知道怎么回事。任何帮助将不胜感激。

Answer 1

终于找到问题了，对于面临此问题的其他人，您可以将单位添加到您的轴：

                xAxes: [{
                    type: 'time',
                    time: {
                        displayFormats: {
                            minute: 'h:mm',     // formatting data in labels
                        },
                        unit: 'minute'          // destroy first and end gaps
                    },
                    display: false,             // preventing labels from being displayed
                }],

github 上的类似问题： https://github.com/chartjs/Chart.js/issues/2277#issuecomment-314662961

ChartJS, Primeng, Gap first and end of line 图表

ChartJS, Primeng, Gap first and end of line chart

javascript

angularjs

chart.js

primeng