Chart.js和右側空閒空間

我想問一下，如果有辦法將圖表推向右側，那麼就不會有任何空閒空間。我附上簡單的圖像，紅線顯示，這個空間也應該由圖表填充。Chart.js和右側空閒空間

也可以創建垂直線作爲點？官方文檔中找不到我的問題的答案。

的，這是我javsacript代碼：

var lineChartData = { 
          labels : ["January","February","March","April"], 
          datasets : [ 
           { 
            label: "Dataset", 
            pointHighlightStroke : "rgba(220,220,220,1)", 
            data : [0,3,4,11] 
           } 
          ] 
         }; 


         window.onload = function(){ 
          var ctx = document.getElementById("canvas").getContext("2d"); 
          window.myLine = new Chart(ctx).Line(lineChartData, { 

           responsive: true, 
           scaleOverride: true, 
           scaleSteps: Math.ceil((max-start)/step), 
           scaleStepWidth: step, 
           pointDot : false, 
          }); 
         }

來源

2015-11-03 user3573535

的空間是存在的，因爲最後x軸標籤（4月）。 Chart.js留下足夠的空間，以便標籤不會被剪掉。這也確保了最後一點的工具提示不會被截斷。

您可以將最後（或全部）標籤設置爲空字符串以擺脫空間。但是，您不會在工具提示中看到任何標籤。如果你想看到的提示標籤，你需要擴展圖表刪除x軸的標籤，像這樣

Chart.types.Line.extend({ 
    name: "LineAlt", 
    initialize: function (data) { 
     var labels = data.labels; 
     data.labels = data.labels.map(function() { return '' }); 
     Chart.types.Line.prototype.initialize.apply(this, arguments); 
     this.datasets[0].points.forEach(function (point, i) { 
      point.label = labels[i] 
     }) 
    } 
});

請注意，您需要使用LineAlt而不是線。

小提琴 - http://jsfiddle.net/0u2c7tez/

然而，這仍然會剪掉工具提示的最後一個點。如果您要啓用工具提示並且不希望它們被裁剪掉，那麼您需要使用自定義工具提示，以便工具提示在外部元素（而不是畫布）中呈現並且不會被裁剪（請參閱https://github.com/nnnick/Chart.js/blob/master/samples/line-customTooltips.html）

來源

2015-11-04 10:35:02 potatopeelings

好的，完整的答案。謝謝。 – user3573535

所以沒有辦法在X軸上顯示標籤，只是讓它們在末端/右側被裁剪/裁剪？ – SISYN

Chart.js和右側空閒空間

回答

相關問題