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和右侧空闲空间

回答

相关问题