高图表.js如何强制 x 轴标签显示所有月份，无论图表大小如何

highcharts.js how to force x-Axis label to display all months regardless of chart size

本文关键字：何强制 js 标签 高图表 显示      更新时间：2023-09-26

我正在制作面积图。

http://jsfiddle.net/b8eoszt0/

我的例子有点复杂或与我们通常看到的例子不同。

对于数据结构，我每个月有 4 周的汇总数据例如：9月1-7日：0,9月8-15日：20等。

图表工作正常，它显示所有数据点（每月 5 个点）

但是，对于 x 轴标签，我想要的是始终显示"9 月、10 月、11 月、12 月、1 月"，无论图表大小如何，因为现在，如果您调整浏览器的大小，图表大小和 a 轴标签都会发生变化。 有时项目少，有时项目多。

$(function () {
$('#container').highcharts({
    chart: {
        type: 'area'
    },
    xAxis: {
        opposite: true,
        type: 'datetime',
        dateTimeLabelFormats: { // don't display the dummy year
            day: '%b %e',
            week: '%b %e',
            month: '%b'
        },
        lineWidth: 0,
        startOnTick: false,
        endOnTick: false,
        tickWidth: 0
    },
    yAxis: {
        gridLineWidth: 0
    },
    series:[
      {
        showInLegend: false,  
        data: [
            [Date.UTC(2015, 8, 1), 0],
            [Date.UTC(2015, 8, 8), 30],
            [Date.UTC(2015, 8, 15), 20],
            [Date.UTC(2015, 8, 22), 50],
            [Date.UTC(2015, 8, 29), 20],
            [Date.UTC(2015, 9, 1), 0],
            [Date.UTC(2015, 9, 8), 30],
            [Date.UTC(2015, 9, 15), 20],
            [Date.UTC(2015, 9, 22), 50],
            [Date.UTC(2015, 9, 29), 20],
            [Date.UTC(2015, 10, 1), 0],
            [Date.UTC(2015, 10, 8), 30],
            [Date.UTC(2015, 10, 15), 20],
            [Date.UTC(2015, 10, 22), 50],
            [Date.UTC(2015, 10, 29), 20],
            [Date.UTC(2015, 11, 1), 0],
            [Date.UTC(2015, 11, 8), 30],
            [Date.UTC(2015, 11, 15), 20],
            [Date.UTC(2015, 11, 22), 50],
            [Date.UTC(2015, 11, 29), 20],
            [Date.UTC(2016, 0, 1), 0],
            [Date.UTC(2016, 0, 8), 30],
            [Date.UTC(2016, 0, 15), 20],
            [Date.UTC(2016, 0, 22), 50],
            [Date.UTC(2016, 0, 29), 20],
            ]              
        }
   ],
});

}）;

我已经尝试了点间隔，但它不允许月份。我试过标签格式化程序，但它不会返回所有标签，似乎Hightcharts在进入格式化程序函数之前做了一些过滤。

您可以在轴上设置类型并定义单位。
检查小提琴。我在您的 xAxis 中添加了以下代码。希望这有帮助。

 type: 'datetime',
  units: [
    [
      'month', [1, 3, 6]
    ]
  ]

数组的第一个数字定义了间隔，因此对于我设置的每个月，您只显示两个月的第一个值将是 2。数组上的下一个数字是允许的倍数，根据您的要求，不需要这样做，一个简单的"月"，[1] 就可以了。有关详细信息，请查看 API 参考。

您可以使用

tickPositioner，例如：http://jsfiddle.net/b8eoszt0/2/

        tickPositioner: function(min, max) {
          var ticks = this.tickPositions, // original ticks
              newTicks = [],              // container for a new ticks
              start = new Date(ticks[0]); // first tick 
          // render tick in a first day of the month
          start.setDate(1);
          // add labels, one for every month:
          while (min <= max) {
            start.setMonth(start.getMonth() + 1);
            min = start.getTime(); 
            newTicks.push(min);
          }
          // store original info of labels:
          newTicks.info = ticks.info;
          return newTicks;
        },
相关文章：