x 轴标签未完全显示

Question

我知道这可能是有史以来写的最糟糕的代码，但请多多包涵，我真的不明白 D3 的窍门（还）。

所以我有以下图表https://jsfiddle.net/El4a/sfu07q67/6/

包含很多hacky代码。我需要的是显示过去 12 个月的数据，最后显示的月份是当前月份。所以在这种情况下（现在是 4 月），x 轴的范围是从 5 月（2015 年）到 4 月（2016 年）。像这样：

到目前为止，图表上的数据显示正确。

然而，这些标签真的很痛苦。我把它们弄得差不多了，但由于某种奇怪的原因，最旧的（5 月）和当前的（4 月）月份没有显示出来。

我正在按正确的顺序对月份的名称进行排序：

    var months = ["Jan", "Feb", "Maa", "Apr", "Mei", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dec"];

var x = [];
for (var i = 0; i < timePeriod.length; i++) {
  if (timePeriod[i] === 0) {
    x.push(months[timePeriod[i]]);
  }
  else {
    x.push(months[timePeriod[i]-1]);
  }
}; 

//result : ["Mei", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dec", "Jan", "Feb", "Maa", "Apr"]

然后尝试将它们粘贴到图表上：

    var count = 0;  
chart.xAxis
.axisLabel('Month')  
.tickValues([1,2,3,4,5,6,7,8,9,10,11,12])
.tickFormat(function(d) {  
  var label = x[count];  
  count++;
  return label;   
});

谁能帮帮我？

Answer 1

问题在于 xAxis 的 tickFormat 实现。出于某种原因，您的 count 变量从 0 运行到 13，当您最后两次访问 x 时，即 12 和 13，返回值未定义。

将您的 tickFormat 函数更改为以下内容，它应该可以工作：

.tickFormat(function(d) {  
  return x[d-1];       
 });

注意 d-1。