javascript Highcharts 日期时间轴,如何禁用时间部分(仅显示日期)?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/11396628/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-26 13:02:29  来源:igfitidea点击:

Highcharts datetime axis, how to disable time part (show only dates)?

javascriptdatetimehighcharts

提问by gremo

My chart is displaying data day-by-day(user and system sent SMS/Newsletters). So time part is not relevant and unnecessary. Here is an example: http://jsfiddle.net/uaxZP/1/where time "12:00" is displayed.

我的图表每天都在显示数据(用户和系统发送的短信/通讯)。所以时间部分是不相关和不必要的。这是一个示例:http: //jsfiddle.net/uaxZP/1/,其中显示时间“12:00”。

How can I force Highcharts to never display the time part in a "datetime" axis?

如何强制 Highcharts从不在“日期时间”轴中显示时间部分

EDIT: Highcharts will display dates w/wo times based on chart or screen size. I've updated jsfiddle removing some data and now it's displaying also time parts.

编辑:Highcharts 将根据图表或屏幕大小显示日期 w/wo 时间。我已经更新了 jsfiddle 删除了一些数据,现在它也显示了时间部分。

采纳答案by Mike Robinson

You can intercept the x-axis label function and change it's output. In my example, I've changed it to render short dates:

您可以截取 x 轴标签函数并更改其输出。在我的示例中,我已将其更改为呈现短日期:

http://jsfiddle.net/uaxZP/3/

http://jsfiddle.net/uaxZP/3/

{ xAxis: 
    labels:
        formatter: function() {
             return Highcharts.dateFormat("%b %e", this.value);
        }
    }
}

The xAxis.labels.formatter property allows control over this. You also may notice I'm using Highcharts.dateFormat, which is a utility function for rendering dates. This is not mandatory, but it's a nice built in feature. Documentation on the xAxis formatter is here:

xAxis.labels.formatter 属性允许对此进行控制。您可能还会注意到我使用的是 Highcharts.dateFormat,它是一个用于呈现日期的实用函数。这不是强制性的,但它是一个很好的内置功能。xAxis 格式化程序的文档在这里:

http://www.highcharts.com/ref/#xAxis-labels--formatter

http://www.highcharts.com/ref/#xAxis-labels--formatter

回答by Daniel Garcia

The easiest way to do is using "minTickInterval"

最简单的方法是使用“minTickInterval”

xAxis: {
       minTickInterval: 24 * 3600 * 1000
}

http://api.highcharts.com/highcharts#xAxis.minTickInterval

http://api.highcharts.com/highcharts#xAxis.minTickInterval