ChartJS，Primeng，差距首先和折線圖結尾

我正在使用primeng圖表組件，它使用chartjs。我們在primeng 4.0和angular 4中使用chartjs 2.5.0。我創建了一個動態圖表，並在通過一些服務找到我們之後，將數據放入圖表中。問題在於，一段時間以後，chartjs會在圖表的第一個和結尾處出現差距。這裏是我們的選項chartjs：ChartJS，Primeng，差距首先和折線圖結尾

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(); 
      } 
     } 
    }

和圖表圖片：

我不知道發生了什麼事情。任何幫助將不勝感激。

來源

2017-05-30 Naeem Baghi

我終於發現了問題，面臨這個問題，您可以向軸添加單元等人：在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

來源

2017-07-12 06:05:31

ChartJS，Primeng，差距首先和折線圖結尾

回答

相關問題