javascript 如何在 Highcharts 中的日期时间轴上仅显示特定的 x 轴值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8674489/
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
How to show only specific x-axis values on datetime axis in Highcharts
提问by Curious2learn
I have searched a lot on this topic. I found one answer on stackoverflow, but it is very terse and not helpful to me (since I am very new to both javascript and highcharts). I would appreciate if someone could explain how to do this by modifying my code below.
我在这个主题上搜索了很多。我在 stackoverflow 上找到了一个答案，但它非常简洁，对我没有帮助（因为我对 javascript 和 highcharts 都很陌生）。如果有人可以通过修改下面的代码来解释如何做到这一点，我将不胜感激。
I have the following code:
我有以下代码：
$(document).ready(function() {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'divcontainer',
height: 500
},
xAxis: {
type: 'datetime',
},
credits: {
enabled: false
},
series: [{
data: [
[Date.UTC(2007,05,29), 300], // This x-axis value should be labeled.
[Date.UTC(2007,09,03), 300], // NO LABEL for this value
[Date.UTC(2007,09,04), 200] // This x-axis value should be labeled.
]
}]
});
})
This code gives me:
这段代码给了我：
There are two problems with this.
这有两个问题。
(1) The starting date June 29, 2007 is not shown. I want that one to appear in the chart. (2) I only want to show the dates corresponding to the first and last point in the data series.
(1) 未显示2007 年6 月29 日的开始日期。我希望那个出现在图表中。(2) 我只想显示数据系列中第一个和最后一个点对应的日期。
I would really appreciate if anyone can show me how to do these two things.
如果有人能告诉我如何做这两件事，我将不胜感激。
Thank you.
谢谢你。
采纳答案by Mark
回答by Nobita
Regarding the (1)question, I believe you can't do that in datetime xAxis in HighCharts. When setting that type of axis, the framework calculates the ticks shown in the correspondent axis depending on the data you have.
关于(1)问题，我相信您不能在HighCharts中的 datetime xAxis 中做到这一点。设置该类型的轴时，框架会根据您拥有的数据计算相应轴中显示的刻度。
In answer to the (2)question, I believe that so far you can't skip times in the datetime axis. However, and even though I haven't tried, you might want to look at some workaround using categoriesso you can use a formatter and replace the ticks that you don't want.
在回答（2）问题时，我相信到目前为止您无法在日期时间轴上跳过时间。但是，即使我没有尝试过，您也可能想查看一些使用类别的解决方法，以便您可以使用格式化程序并替换您不想要的刻度。
Despite all of the above, I did a workaround that you might want to use and that it just needs a little bit of formatting to be more or lesswhat you were asking. Here it is:
尽管如此，我还是做了一个您可能想要使用的解决方法，它只需要一点点格式即可或多或少地满足您的要求。这里是：
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
xAxis: {
type: 'datetime',
labels: {
enabled: false
}
},
series: [{
dataLabels: {
enabled:true,
formatter: function(){
if(this.point === this.series.data[this.series.data.length - 1])
{
return this.x
}
if(this.point === this.series.data[0])
{
return this.x
}
}
},
data: [
[Date.UTC(2007,05,29), 300],
[Date.UTC(2007,09,23), 300],
[Date.UTC(2007,09,04), 400]
]
}]
});
});
Basically what I do is getting rid of the xAxis labels and just show the date in the point itself for the values that I want (first and last). Notice that you might want to format how that date is shown because right now is showing the timestamp in ms.
基本上我所做的是摆脱 xAxis 标签，只在点本身中显示我想要的值（第一个和最后一个）的日期。请注意，您可能希望格式化该日期的显示方式，因为现在以毫秒为单位显示时间戳。
You can see this live in jsFiddle: xAxis labels deleted
您可以在jsFiddle 中实时看到：xAxis 标签已删除
回答by Eran Goldin
You can do it easily with .isLastand .isFirst, like this:
您可以使用.isLastand轻松完成.isFirst，如下所示：
xAxis: {
type: 'datetime',
labels: {
formatter: function() {
if(this.isLast || this.isFirst)
return [whatever label calculation you need];
else return null;
},
},
title: {
text: 'Date'
}
}
回答by JohnnyHK
Old question, but there's now a cleaner way to do this with tickPositions.
老问题，但现在有一种更简洁的方法可以使用tickPositions.
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
xAxis: {
type: 'datetime',
labels: {
// When using tickPositions, you'll also need to specify a label format.
format: '{value:%e. %b}',
},
tickPositions: [Date.UTC(2007,05,29), Date.UTC(2007,09,04)]
},
credits: {
enabled: false
},
series: [{
data: [
[Date.UTC(2007,05,29), 300], // This x-axis value should be labeled.
[Date.UTC(2007,09,03), 300], // NO LABEL for this value
[Date.UTC(2007,09,04), 200] // This x-axis value should be labeled.
]
}]
});
Resulting Chart
结果图表
回答by Wade
Have you tried putting a comma-separated list of values under xAxis:{ categories:[{'5/29/2007', '9/4/2007', '9/23/2008'}] }
您是否尝试过将逗号分隔的值列表放在 xAxis 下：{ Categories:[{'5/29/2007', '9/4/2007', '9/23/2008'}] }
and for the chart: { series: [{null}, {300}, {400}] }
对于图表：{ series: [{null}, {300}, {400}] }
I believe you can also use a delegate for the xAxis labels or series labels so that you can test the values against a threshold and drop them out.
我相信您还可以为 xAxis 标签或系列标签使用委托，以便您可以根据阈值测试值并将其删除。
