将开始日期和结束日期添加为高图中的X轴标签
Add start-date and end-date as a Xaxis label in highchart
我在图表中使用日期作为字符串。
如何在xAxis中使用开始日期和结束日期字符串变量作为标签?开始日期='10.02.2013'结束日期=2013年5月10日
随附代码和图表图像。我唯一需要做的就是添加startDateLabel和endDateLabel。
var dateEndLabel, dateStartLabel, i, j, lastDate, seriesData, x, y;
i = 0;
seriesData = new Array();
lastDate = data[i].Values.length - 1;
dateStartLabel = data[i].Values[0].Time;
dateEndLabel = data[i].Values[lastDate].Time;
while (i < data.length) {
seriesData[i] = [];
j = 0;
x = [];
y = [];
while (j < data[i].Values.length) {
x = data[i].Values[j].Time;
y = data[i].Values[j].Value;
seriesData[i].push([x, y]);
j++;
}
i++;
}
return $("#criticalWPtrend").highcharts({
chart: {
type: "line"
},
area: {
height: "100%",
width: "100%",
margin: {
top: 20,
right: 30,
bottom: 30,
left: 50
}
},
title: {
text: ""
},
subtitle: {
text: ""
},
legend: {
layout: "vertical",
verticalAlign: "right",
align: "right",
borderWidth: 0
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
day: '%m-%d'
},
tickInterval: 24 * 3600 * 1000
},
yAxis: {
title: {
text: 'Value'
},
lineWidth: 1,
min: 0,
minorGridLineWidth: 0,
gridLineWidth: 0,
alternateGridColor: null
},
tooltip: {
valueSuffix: " "
},
plotOptions: {
series: {
marker: {
enabled: false
},
stickyTracking: {
enabled: false
}
},
line: {
lineWidth: 2,
states: {
hover: {
lineWidth: 3
}
},
marker: {
enabled: false
}
}
},
series: [
{
name: data[0].Name,
data: seriesData[0]
}, {
name: data[1].Name,
data: seriesData[1]
}, {
name: data[2].Name,
data: seriesData[2]
}, {
name: data[3].Name,
data: seriesData[3]
}, {
name: data[4].Name,
data: seriesData[4]
}, {
name: data[5].Name,
data: seriesData[5]
}
],
navigation: {
menuItemStyle: {
fontSize: "10px"
}
}
});
});
是的,这在renderer
方法中是可能的。请参阅此基本示例。
chart.renderer.text('10.02.2013', 0, 300)
.attr({
rotation: 0
})
.css({
color: '#4572A7',
fontSize: '16px'
})
.add();
您需要注意x/y位置(其他两个参数)才能正确放置它。您也可以修改文本样式。
我不确定,但我认为您只需要通过更新方法来更新您的xAxis
this.xAxis[0].update({
title: {
text: "start-date = '10.02.2013' end-date = '10.05.2013'",
style: {
fontSize: '10px'
}
}
});
以下是示例:http://jsfiddle.net/FEwKX/
但是如果您的意思是开始和结束日期需要绑定到边缘,则必须在配置中指定xAxis设置
xAxis: {
categories: categoriesArray
}
其中categoriesArray是这样的数组:
['10.02.2013', '', '', '', '', '', '', '', '', '', '', '10.05.2013']
它应该与序列数据的长度相同。点击此处查看:http://jsfiddle.net/FEwKX/1/
希望这对你有帮助。
您还可以使用labelFormatter和http://api.highcharts.com/highcharts#xAxis.labels.formatter并检查标签是否为isFirst或isLast,然后使用您的日期,在其他情况下返回正确的值(如数字)。
相关文章:
- 动态更改高图中的系列颜色
- 如何为高图中的区域线创建z索引
- 如何将数据标签与数据一起传递,以便在高图中的工具提示中显示
- 删除高图中的第一条和最后一条网格线
- 如何根据高图中的值获得动态颜色变化
- 动态更改高图中x轴刻度标签的日期时间格式
- 在高图中重命名导出时的图例
- 我怎样才能在高图中保持颜色不变
- 如何在高图中缩放缩放事件的svg路径
- 将开始日期和结束日期添加为高图中的X轴标签
- 是否可以在具有多个停止点的高图中呈现线性渐变
- 在高图中启用“向下钻取”功能,无需修改序列
- 如何在java脚本高图中实现z索引
- 如何在高图中设置y轴值
- 在多Y轴高图中重叠Y轴
- 如何更改饼状高图中的字体属性
- 在高图中动态改变点的颜色
- 从下拉菜单中更改选择时,更改高图中的数据
- 在高图中显示JavaScript日期的X轴
- 改变数据在高图中的显示方式