ChartJS、Primeng、Gapの最初と最後のラインチャート

Question

chartjを使用するprimengチャートコンポーネントを使用しています。私たちはprimeng 4.0と角4の横にchartjs 2.5.0を使用しています。 私は動的なチャートを作成し、いくつかのサービスを通じて私たちに来た後にデータをチャートに入れました。問題は、しばらくしてから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

私は最終的にあなたがあなたの軸にユニットを追加することができ、この問題に直面して、他の人のための 、問題を発見：githubの上

   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 
       }], 

同様の問題： https://github.com/chartjs/Chart.js/issues/2277#issuecomment-314662961