javascript - highchartjs 不在工具提示上显示时间

Question

我对 Highcharts 有点陌生。我想仅在工具提示悬停时显示日期。 (当前显示日期和时间)。这是 fiddle 。

http://jsfiddle.net/c8Ldw23q/1/您会注意到，如果将鼠标悬停在数据点上，工具提示会显示日期和时间。我只想要日期。

 Highcharts.chart('container', {
                chart: {
                    type: 'line'
                },
                title: {
                    text: 'Daily Calories'
                },
                credits: {
                    enabled: false
                },
                xAxis: {
                     categories: data.Plots.map(a => new Date(a.Day)),
                    type: 'datetime',
                    //dateTimeLabelFormats: {
                       // day: '%m/%d/%Y'
                   // },
                    labels: {
                        format: '{value:%Y-%b-%e}'
                    },

                },
                yAxis: {
                    // minRange: 2 * Math.abs(@ViewBag.CFAvg - @Model.MyAverage),
                    title: {
                        text: 'Calories'
                    },
                    plotLines: [{
                        color: 'blue',
                        value: data.MyAverage,
                        width: 2,
                        zIndex: 2,
                        label: {
                            text: 'Average Calories (' + data.MyAverage + ')'
                        }
                    }]
                },
                series: [{
                    name: 'Calories',
                    data: data.Plots.map(a => a.TotalCalories),
                    color: 'rgb(4, 83, 4)',
                    //pointStart: Date.UTC(new Date(data.StartDate).getFullYear(), new Date(data.StartDate).getMonth(), new Date(data.StartDate).getDate()), //start date
                   // pointInterval: 24 * 3600 * 1000 // one day
                }],
            });

Answer 1

您可以通过编辑工具提示的格式化程序来准确选择要在工具提示上显示的内容，以获取您可以使用以下内容后的内容:

tooltip: {
  formatter: function() {
    return Highcharts.dateFormat("%Y-%b-%e", this.x) + 
      '<br/><b>' + this.series.name + '</b>: ' + Highcharts.numberFormat(this.y, 0 , '', ' ');
  }
}

它的作用是替换工具提示的默认格式。 Dateformat 将datetime 输出到您选择的字符串。此示例中的 Numberformat 添加空格作为千​​位分隔符，并将数字设置为 0 位小数。

如果您想以不同的方式显示日期时间，请参阅此页面查找所需的语法:http://www.php.net/manual/en/function.strftime.php

工作示例: http://jsfiddle.net/ewolden/c8Ldw23q/3/

tooltip.formatter 上的 API: https://api.highcharts.com/highcharts/tooltip.formatter