javascript：如何将类别链接到highcharts中的日期
小提琴链接：javascript：如何将类别链接到highcharts中的日期,javascript,highcharts,time-series,Javascript,Highcharts,Time Series,小提琴链接： current=1246400000； 阵列移位=[]； arrayTimestampActual=[]； 对于（i=0；icolor1、color2、color3和color4:每6小时的值 也就是00:00:00，05:59:59，06:00:00，11:59:59，12:00:00，17:59:59等等 我正在尝试添加第二个x轴：category:as 00:00:00至05:59:59:cate_1 06:00:00至11:59:59:cate_2 12:00:00至17:
current=1246400000；
阵列移位=[]；
arrayTimestampActual=[]；
对于（i=0；i<6；i++）{
阵列移位[i]=电流+（i*6*3600*1000）；
}
对于（i=0；i值：小时值
也就是00:00:00、01:00:00、02:00:00等。
它具有arearange->color1、color2、color3和color4:每6小时的值
也就是00:00:00，05:59:59，06:00:00，11:59:59，12:00:00，17:59:59等等
我正在尝试添加第二个x轴：category:as
00:00:00至05:59:59:cate_1
06:00:00至11:59:59:cate_2
12:00:00至17:59:59:cate_3
18:00:00至23:59:59:cate_4
有什么方法可以做到这一点吗？我找不到任何解决方案来链接类别和日期时间？
- 添加第二个xAxis，该xAxis带有带有类别数组的
类别
选项集（类别1、类别2等，视需要而定）
- 将所有当前系列设置为使用原始轴（向每个系列添加选项
xAxis:0
）
- 添加使用新轴的新隐藏序列（
xAxis:1
）。通过设置showInLegend:false
、marker:{enabled:false}
和lineWidth:0
- 新系列中的数据是任意数据（因此只需将每个点设置为零），但系列中的项目数必须与类别中的项目数相同（因此对于4个类别
数据：[[0,0]，[1,0]，[2,0]，[3,0]]
）
例如：
我已经对示例中的四个类别进行了硬编码。您的代码必须根据您的数据计算您需要的类别数。
这些类别实际上并不与日期时间概念相关联，您只需确保拥有正确数量的类别（即计算出图表所涵盖的总时间段中有多少个6小时的间隔，并添加这些类别）
- 添加第二个xAxis，该xAxis带有带有类别数组的
类别
选项集（类别1、类别2等，视需要而定）
- 将所有当前系列设置为使用原始轴（向每个系列添加选项
xAxis:0
）
- 添加使用新轴的新隐藏序列（
xAxis:1
）。通过设置showInLegend:false
、marker:{enabled:false}
和lineWidth:0
- 新系列中的数据是任意数据（因此只需将每个点设置为零），但系列中的项目数必须与类别中的项目数相同（因此对于4个类别
数据：[[0,0]，[1,0]，[2,0]，[3,0]]
）
例如：
我已经对示例中的四个类别进行了硬编码。您的代码必须根据您的数据计算您需要的类别数。
类别实际上并不与日期时间概念相关联，您只需确保拥有正确数量的类别（即计算出图表所涵盖的总时间段中有多少个6小时的间隔，并添加这些类别）你能举个例子说明一下如果这样做有效的话你希望得到什么吗？一个简单的模型就可以了。你认为海报需要一个以6小时为间隔的带有类别名称的辅助xAxis（前6小时标记为Cat 1，后6小时标记为Cat 2，以此类推）@EllaRyan，是的，你是对的，我想要次轴作为日期00:00:00到05:59:59的cat_1，日期06:00:00到11:59:59的cat_2，意味着与日期时间相关的类别。你能举例说明如果这样做有效，你希望得到什么吗？一个简单的模型就可以了。你认为海报想要一个以6小时间隔标记类别名称的次轴吗（前6小时标记为1类，后6小时标记为2类，以此类推）@EllaRyan，是的，你是对的，我想要次轴作为日期00:00:00到05:59:59的cat_1，日期06:00:00到11:59:59的cat_2，表示链接到datetime的类别。谢谢！这是你已经做了一天，但可能需要超过一天，然后需要根据时间间隔重复4个类别，基本上这个类别是be一天中的一部分。一天中有四部分，即使每天的类别不同：）@Soni007是的，正如我提到的，您必须根据您的时间段更改类别我添加了一个日期时间，现在是7月1日00:00:00到7月2日05:59:59（“此日期范围假定由日期时间选择器选择”）但是类别将整个范围划分为四个部分，第一类到第四类，新日期又来了第一类。希望你理解Ella:）这是[update]（），我试图根据日期更改类别，但是如果开始日期是7月1日06:00:00，结束日期是7月2日18:00:00，那么班次将是：第二班，第三班，第四班，第一班，第二班，第三班，我该怎么编码？如果一天的开始时间是00:00:00，则可以使用for循环更新类别和相关数据，这些数据将为空：）谢谢！，这是你已经做了一天，但它可能需要超过一天，然后4个类别需要根据时间间隔重复，基本上这个类别将是一天的一部分。一天分四部分，即使天是不同的，但每天的类别是相同的：）@Soni007是的，正如我提到的，您必须根据您的时间段更改类别我添加了一个datetime，现在是7月1日00:00:00到7月2日05:59:59（“此日期范围假定由datetime选择器选择”）但类别将整个范围划分为四个部分，分别为第1类到第4类，新日期再次出现第1类。希望您理解Ella:）这是[update]（），我试图根据日期更改类别，但如果开始日期是7月1日06:00:00，结束日期是7月2日18:00:00，那么班次将是：班次2，班次3，班次4，班次1，班次2，班次3，我如何编码？如果一天的开始时间是00:00:00，则可以使用for循环更新类别和相关数据，这些数据将为空：）
current = 1246406400000;
arrayShifts = [];
arrayTimestampActual = [];
for (i = 0; i < 6; i++) {
arrayShifts[i] = current + (i * 6 * 3600 * 1000);
}
for (i = 0; i <= 18; i++) {
arrayTimestampActual[i] = current + (i * 1 * 3600 * 1000);
}
var
color3 = [
[arrayShifts[0], 27, 40],
[arrayShifts[1] - 60000, 27, 40],
[arrayShifts[1], 30, 50],
[arrayShifts[2] - 60000, 30, 50],
[arrayShifts[2], 40, 60],
[arrayShifts[3] - 60000, 40, 60],
[arrayShifts[3], 45, 65],
[arrayShifts[4] - 60000, 45, 65],
],
color2 = [
[arrayShifts[0], 14.3, 27],
/* [1246492800000, 14.3, 27], */
[arrayShifts[1] - 60000, 14.3, 27],
[arrayShifts[1], 20, 30],
[arrayShifts[2] - 60000, 20, 30],
[arrayShifts[2], 28, 40],
[arrayShifts[3] - 60000, 28, 40],
[arrayShifts[3], 30, 45],
[arrayShifts[4] - 60000, 30, 45],
],
color1 = [
[arrayShifts[0], 0, 14.3],
[arrayShifts[1] - 60000, 0, 14.3],
[arrayShifts[1], 0, 20],
[arrayShifts[2] - 60000, 0, 20],
[arrayShifts[2], 0, 28],
[arrayShifts[3] - 60000, 0, 28],
[arrayShifts[3], 0, 30],
[arrayShifts[4] - 60000, 0, 30],
],
value = [
[arrayTimestampActual[0], 10],
[arrayTimestampActual[1], 20],
[arrayTimestampActual[2], 25],
[arrayTimestampActual[3], 23.8],
[arrayTimestampActual[4], 20],
[arrayTimestampActual[5], 12],
[arrayTimestampActual[6], 37],
[arrayTimestampActual[7], 23.8],
[arrayTimestampActual[8], 35],
[arrayTimestampActual[9], 15],
[arrayTimestampActual[10], 22],
[arrayTimestampActual[11], 23.8],
[arrayTimestampActual[12], 35],
[arrayTimestampActual[13], 38],
[arrayTimestampActual[14], 25],
[arrayTimestampActual[15], 30],
[arrayTimestampActual[16], 35],
[arrayTimestampActual[17], 27],
[arrayTimestampActual[18], 38]
];
var chart = Highcharts.chart('container', {
title: {
text: ''
},
xAxis: [{
type: 'datetime'
},
{
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
opposite: true
}],
yAxis: {
min: 0,
title: {
text: null
}
},
tooltip: {
crosshairs: true,
shared: true,
// valueSuffix: '°C'
},
chart: {
backgroundColor: '#f4f4f4',
},
/* legend: {
}, */
series: [{
name: 'Value',
data: value,
zIndex: 1,
marker: {
fillColor: 'white',
lineWidth: 2,
lineColor: Highcharts.getOptions().colors[0]
}
}, {
name: 'color1',
data: color1,
type: 'arearange',
lineWidth: 0,
// linkedTo: ':previous',
color: Highcharts.getOptions().colors[2],
fillOpacity: 0.3,
zIndex: 0,
marker: {
enabled: false
}
},
{
name: 'color2',
data: color2,
type: 'arearange',
lineWidth: 0,
// linkedTo: ':previous',
color: '#FFC200',
fillOpacity: 0.3,
zIndex: 0,
marker: {
enabled: false
}
},
{
name: 'color3',
data: color3,
type: 'arearange',
lineWidth: 0,
/* linkedTo: ':previous', */
color: '#f01515',
fillOpacity: 0.3,
zIndex: 0,
marker: {
enabled: false
}
}
]
});
var maxY = chart.yAxis[0].max;
var color4 = [
[arrayShifts[0], 40, maxY],
[arrayShifts[1] - 60000, 40, maxY],
[arrayShifts[1], 50, maxY],
[arrayShifts[2] - 60000, 50, maxY],
[arrayShifts[2], 60, maxY],
[arrayShifts[3] - 60000, 60, maxY],
[arrayShifts[3], 65, maxY],
[arrayShifts[4] - 60000, 65, maxY],
];
chart.addSeries({
name: 'color4',
//showInLegend: false,
data: color4,
type: 'arearange'
});
chart.yAxis[0].update({
max: maxY
});