Question

我对Highcharts有点新鲜。我想仅在工具提示悬停时显示日期。（目前显示日期和时间）。这是小提琴。

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上显示的内容，以便在您使用以下内容后获得所需内容：

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小数。

如果您想以不同的方式展示datetime，请参阅此页面以查找所需的语法：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

Answer 2

您可以使用Highcharts.dateFormat自定义日期的显示方式。有关详细信息，请参阅function documentation。

示例：

Highcharts.dateFormat('%Y/%m/%d', new Date(a.Day))

小提琴：http://jsfiddle.net/zga4mnrw/

结果：

highchartjs不显示工具提示的时间

2 个答案: