我在这个主题上搜索了很多。我在stackoverflow上找到了一个答案,但它非常简洁,对我没有帮助(因为我对javascript和highcharts都很新)。如果有人可以通过修改我的代码来解释如何做到这一点,我将不胜感激。
我有以下代码:
$(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.
]
}]
});
})
这段代码告诉我:
这有两个问题。
(1)未显示2007年6月29日的开始日期。我希望那个出现在图表中。 (2)我只想显示数据系列中第一个和最后一个点对应的日期。
如果有人能告诉我如何做这两件事我真的很感激。
谢谢。
答案 0 :(得分:3)
关于(1)问题,我相信你不能在 HighCharts 中的datetime xAxis中这样做。设置该类型的轴时,框架会根据您拥有的数据计算对应轴中显示的刻度。
在回答(2)问题时,我相信到目前为止您无法在日期时间轴中跳过次数。但是,即使我没有尝试过,您可能希望使用类别查看一些解决方法,以便您可以使用格式化程序并替换您不想要的刻度。
尽管如上所述,我做了一个你可能想要使用的解决方法,只需要一些格式就可以或多或少你所要求的。这是:
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]
]
}]
});
基本上我所做的就是摆脱xAxis标签,只显示我想要的值(第一个和最后一个)的点本身的日期。请注意,您可能希望格式化该日期的显示方式,因为此时显示的是以ms为单位的时间戳。
中看到这一点答案 1 :(得分:3)
您可以使用.isLast
和.isFirst
轻松完成此操作:
xAxis: {
type: 'datetime',
labels: {
formatter: function() {
if(this.isLast || this.isFirst)
return [whatever label calculation you need];
else return null;
},
},
title: {
text: 'Date'
}
}
答案 2 :(得分:2)
答案 3 :(得分:1)
旧问题,但现在有一种更清晰的方法可以使用tickPositions
。
<div class="custom_image" id="uique_number"></div>
答案 4 :(得分:0)
您是否尝试在xAxis下放置以逗号分隔的值列表:{categories:[{'5/29/2007','9/4/2007','9/23/2008'}}}
和图表:{series:[{null},{300},{400}]}
我相信您也可以使用xAxis标签或系列标签的委托,以便您可以针对阈值测试值并将其删除。