javascript - 绘制点标签的显示未正确显示在每月第一天的 X 范围图表上 - Highcharts

Question

我目前正在制作一个 x 范围图来显示事件的时间线。将光标放在条形图上时，用于显示数据信息的弹出窗口出现问题。

对于任何特定月份的每个第一个日期，我都没有获得所需的准确信息。

这是我的代码:

Highcharts.chart('container', {
    chart: {
       type: 'xrange',
        styledMode: true
    },
    title: {
        text: 'Highcharts X-range'
    },
    xAxis: {
        type: 'datetime'
    },
    yAxis: {
        title: {
            text: ''
        },
        categories: ['Proto', 'Dev', 'Test'],
        reversed: true
        },
    series: [{
        name: 'Project:',

        pointWidth: 20,
        data: [{
            x: Date.UTC(2014, 0, 1),
            x2: Date.UTC(2014, 5, 2),
            y: 0,
            partialFill: 0.25
        },  {
            x: Date.UTC(2014, 2, 1),
            x2: Date.UTC(2014, 3, 19),
            y: 1
        }, {
            x: Date.UTC(2014, 11, 1),
            x2: Date.UTC(2014, 11, 23),
            y: 2
        }],
          dataLabels: {
          enabled: true
        }
       }]

      });

我希望输出的格式如下:

2014 年 1 月 1 日，星期三 - 2014 年 6 月 2 日，星期一 元素:原型(prototype)

但实际输出是:

2014 年 1 月 - 2014 年 6 月 元素:原型(prototype)

如果有人能帮我解决这个问题，我将不胜感激。

谢谢。

Answer 1

您可以使用 tooltip.formatter 回调函数自定义工具提示内容，并使用 Highcharts.dateFormat() 方法根据需要格式化日期。检查下面发布的代码和演示。

HTML:

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/xrange.js"></script>
<div id="container"></div>

JS:

Highcharts.chart('container', {
  chart: {
    type: 'xrange',
    styledMode: true
  },
  title: {
    text: 'Highcharts X-range'
  },
  xAxis: {
    type: 'datetime'
  },
  yAxis: {
    title: {
      text: ''
    },
    categories: ['Proto', 'Dev', 'Test'],
    reversed: true
  },
  tooltip: {
    formatter: function() {
      var point = this,
        series = point.series,
        color = point.color || series.chart.options.colors[point.colorIndex],
        firstDate = Highcharts.dateFormat('%A, %b %e, %Y', point.x),
        secondDate = Highcharts.dateFormat('%A, %b %e, %Y', point.x2),
        header = '<span style="font-size: 10px">' + firstDate + ' - ' + secondDate + '</span><br/>',
        content = '<span style="color:' + color + '">\u25CF</span> ' + series.name + ': <b>' + point.yCategory + '</b><br/>';

      return header + content;
    }
  },
  series: [{
    name: 'Project',
    pointWidth: 20,
    data: [{
      x: Date.UTC(2014, 0, 1),
      x2: Date.UTC(2014, 5, 2),
      y: 0,
      partialFill: 0.25
    }, {
      x: Date.UTC(2014, 2, 1),
      x2: Date.UTC(2014, 3, 19),
      y: 1
    }, {
      x: Date.UTC(2014, 11, 1),
      x2: Date.UTC(2014, 11, 23),
      y: 2
    }],
    dataLabels: {
      enabled: true
    }
  }]

});

演示:
https://jsfiddle.net/BlackLabel/3wbscy6q/

API 引用:
https://api.highcharts.com/highcharts/tooltip.formatter
https://api.highcharts.com/class-reference/Highcharts#.dateFormat
https://api.highcharts.com/highcharts/tooltip.dateTimeLabelFormats