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和line of line chart

1 个答案: