Charts 高图表以小时格式设置x轴值

Charts 高图表以小时格式设置x轴值,charts,highcharts,Charts,Highcharts,我正在使用High chart进行图形绘制。我希望x轴的时间格式如下[00,01,02,03,04,05,06,07,08,09,10,11,12,13,14,15,16,17,18,19,20,21,22,23] 而且我不想使用我已经评论过的categories参数 下面是Js $(“#容器”)。高图({ 图表:{ zoomType:'xy' }, 标题:{ 文字:“东京月平均气温和降雨量” }, 副标题:{ 文本:'来源:WorldClimate.com' }, xAxis:[{ //类别

我正在使用High chart进行图形绘制。我希望x轴的时间格式如下[00,01,02,03,04,05,06,07,08,09,10,11,12,13,14,15,16,17,18,19,20,21,22,23]
而且我不想使用我已经评论过的categories参数

下面是Js

$(“#容器”)。高图({
图表:{
zoomType:'xy'
},
标题:{
文字:“东京月平均气温和降雨量”
},
副标题:{
文本:'来源:WorldClimate.com'
},
xAxis:[{
//类别:['00','01','02','03','04','05',',
//'06', '07', '08', '09', '10', '11']
标签:{
格式化程序:函数(){
返回Highcharts.dateFormat('%H',this.value);
},
风格:{
颜色:“#89A54E”
},
}
}],
yAxis:[{//主yAxis
标签:{
//格式:“{value}°C”,
风格:{
颜色:“#89A54E”
}
},
分:0,,
//最高:4,
时间间隔:2,
标题:{
文字:“温度”,
风格:{
颜色:“#89A54E”
}
}
},{//次雅克西
标题:{
文字:‘降雨’,
风格:{
颜色:“#4572A7”
}
},
最高:240,
时间间隔:50,
标签:{
//格式:“{value}mm”,
风格:{
颜色:“#4572A7”
}
},
相反:对
}],
工具提示:{
分享:真的
},
图例:{
布局:“垂直”,
对齐:“左”,
x:120,
垂直排列:“顶部”,
y:100,
浮动:是的,
背景颜色:“#FFFFFF”
},
系列:[{
名称:'已用',
颜色:“#4572A7”,
键入:“列”,
亚克西斯:1,,
数据:[49.9,71.5,106.4,129.2,144.0,176.0,135.6148.5,216.4194.1,95.6,54.4],
工具提示:{
valueSuffix:'
},
}, {
名称:'单击',
颜色:“#89A54E”,
类型:“样条线”,
亚克西斯:1,,
资料:msg,,
工具提示:{
valueSuffix:'
}
},{
名称:'单击',
颜色:“#89A54E”,
类型:“样条线”,
数据:[9.9,1.5,6.4,9.2,4.0,6.0,5.6,8.5,6.4,4.1,5.6,4.4],
工具提示:{
valueSuffix:'
}
}
]
});
}
});
X轴代码:

xAxis:[{
//类别:['00','01','02','03','04','05',',
//'06', '07', '08', '09', '10', '11']
标签:{
格式化程序:函数(){
返回Highcharts.dateFormat('%H',this.value);
},
风格:{
颜色:“#89A54E”
},
}
}],

提前感谢

您应该将轴()的类型设置为“日期时间”,然后通过以下两种方式之一设置数据:

  • 使用x/y配对,如:[123002020000,9],其中123002020000是以毫秒为单位的时间(JS timestamp),也可以通过Date.UTC()实现
  • 使用pointStart/pointInterval/tickInterval


您应该将axis()的类型设置为“datetime”,然后通过以下两种方式之一设置数据:

  • 使用x/y配对,如:[123002020000,9],其中123002020000是以毫秒为单位的时间(JS timestamp),也可以通过Date.UTC()实现
  • 使用pointStart/pointInterval/tickInterval


我使用的是双轴图表我使用的是双轴图表,但在工具提示上显示的是星期日,1月1日,01:00,我只想在鼠标上显示小时,比如在第一个栏上,它应该是00,在第二个栏上,等等。。不完整的日期您可以使用formatter:并在标签中使用dateformat。我尝试使用这种方式它不起作用的工具提示:{formatter:function(){return''+this.x+';}},您能告诉我吗,我在工具提示中没有看到您的格式化程序,看一看,但同时我还想显示其他y参数,即花费,单击值,与之前显示的一样,但在工具提示上显示周日,1月1日,01:00,我只想在鼠标上显示小时,如第一个栏上的时间应为00,第二个栏上的时间应为01,依此类推。。不完整的日期您可以使用formatter:并在标签中使用dateformat。我尝试使用这种方式它不起作用的工具提示:{formatter:function(){return''+this.x+';}},您能告诉我吗,我在工具提示中没有看到您的格式化程序,看一看,但在同一时间,我还想显示其他y参数,即花费,点击值,就像以前显示的一样
 plotOptions:{
        series:{
            pointStart:Date.UTC(2012,0,1),
            pointInterval: 3600 * 1000
        }
    },