如何更改日期格式，使其在Highcharts中只显示月和年，而不是日、月和年？

oknrviil 于 2023-03-18 发布在 Highcharts

关注(0)|答案(1)|浏览(239)

如何更改日期格式，使Highcharts只显示月和年，而不是日、月和年。

现在看起来像这样-开始：2023年7月9日（星期日）结束：2023年9月19日星期二
**应如下所示-（无开始或结束）**2023年7月9日2023年9月19日

链接到代码：谢谢。

(function(H) {
H.wrap(H.Legend.prototype, 'colorizeItem', function(proceed, item, visible) {
var color = item.color;

item.color = item.options.legendColor;
proceed.apply(this, Array.prototype.slice.call(arguments, 1));
item.color = color;
});
}(Highcharts));

Highcharts.ganttChart('container', {
xAxis: [{
tickInterval: 1000 * 3600 * 24 * 30,
labels: {
format: '{value: %b}'
}
},
{
tickInterval: 1000 * 3600 * 24 * 90,
units: [
['month', [3]]
],
labels: {
align: 'center',
formatter: function() {
const label = this,
date = new Date(this.value),
year = date.toLocaleString('en', { year: "2-digit", }),
quarter = Math.floor(date.getMonth() / 3 + 1);

return `FY${year} Q${quarter}`;
}
}
}
],
legend: {
enabled: true
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{point.label}'
}
}
},
series: [{
name: 'Everyone',
legendColor: '#ffe699',
data: [{
name: 'Annual',
label: 'Training 1',
color: '#ffe699',
start: Date.UTC(2023, 7, 1),
end: Date.UTC(2023, 8, 2)
}, {
name: '2 Years',
label: 'Training 2',
color: '#ffe699',
start: Date.UTC(2023, 6, 9),
end: Date.UTC(2023, 8, 19)
}]
}, {
name: 'Menagers',
legendColor: '#9bc2e6',
data: [{
name: 'Annual',
color: '#9bc2e6',
label: 'Training 1',
start: Date.UTC(2023, 9, 10),
end: Date.UTC(2023, 11, 23)
}]
}]
});

<script src="https://code.highcharts.com/gantt/highcharts-gantt.js"></script>

<div id="container"></div>

highcharts

来源：https://stackoverflow.com/questions/75666388/how-to-change-the-date-format-to-only-show-month-and-year-in-highcharts-instead

1条答案

按热度按时间

fkaflof61#

如果你想改变工具提示，你可以用tooltip.pointFormatter()覆盖原来的提示，你还需要改变默认的tooltip.dateTimeLabelFormats一天。
在plotOptions.series中使用以下代码

tooltip: {
    dateTimeLabelFormats: {
      day: '%b %e, %Y.',
    },
    pointFormatter() {
      let point = this,
        series = point.series,
        xAxis = series.xAxis,
        formats = series.tooltipOptions.dateTimeLabelFormats,
        startOfWeek = xAxis.options.startOfWeek,
        ttOptions = series.tooltipOptions,
        format = ttOptions.xDateFormat,
        start,
        end,
        milestone = point.options.milestone,
        retVal = '<b>' + (point.name || point.yCategory) + '</b>';

      if (ttOptions.pointFormat) {
        return point.tooltipFormatter(ttOptions.pointFormat);
      }

      if (!format && typeof point.start === "number") {
        format = series.chart.time.getDateFormat(
          xAxis.closestPointRange,
          point.start,
          startOfWeek,
          formats || {}
        );
      }

      start = series.chart.time.dateFormat(
        format,
        point.start
      );
      end = series.chart.time.dateFormat(
        format,
        point.end
      );

      retVal += '<br/>';

      if (!milestone) {
        retVal += start + '<br/>';
        retVal += end + '<br/>';
      } else {
        retVal += start + '<br/>';
      }

      return retVal;
    },
  },

演示：https://jsfiddle.net/BlackLabel/jw8m4cn5/
API参考：https://api.highcharts.com/highcharts/plotOptions.series.tooltip.dateTimeLabelFormats https://api.highcharts.com/highcharts/plotOptions.series.tooltip.pointFormatter

赞(0）回复(0）举报 2023-03-18

我来回答

如何更改日期格式，使其在Highcharts中只显示月和年，而不是日、月和年？

1条答案

相关问题

热门标签

最新问答