如何将日期传递给基线高图表中的x轴而不是值。
如何将日期传递给基线高图表中的x轴而不是值。
提问于 2014-09-08 11:37:20
这是具有x轴上的值和y轴上的百分比的基线高图，请分享如何将日期传递给x轴而不是值，这是我的高图表代码。
<!DOCTYPE>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<body>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="height: 400px"></div>
</body>
<script>
$('#container').highcharts({
title: {
text: 'RNA - CP ( Radio Network Availability - Customer Perceived)',
x: -20 //center
},
tooltip: {
formatter: function () {
// console.log(this.point.extprop);
var s = 'The value is <b>' + this.x +
'</b> is <b>' + this.y + '</b>';
if (this.point.extprop) {
s += 'for <b>' + this.point.extprop + '</b>';
}
return s;
}
},
subtitle: {
text: '',
x: -20
},
yAxis: {
title: {
text: 'Percent'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
legend: {
layout: 'vertical',
//align: 'right',
//verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: 'RNA',
data: [{
x: 0,
y: 99.43,
extprop: 'power issue'
}, {
x: 1,
y: 99.40,
extprop: 'flood'
}, {
x: 2,
y: 99.24,
extprop: 'power issue'
}, {
x: 3,
y: 99.40,
extprop: 'flood'
}, {
x: 4,
y: 99.21,
extprop: 'power issue'
}, {
x: 5,
y: 98.45,
extprop: 'flood'
}, {
x: 6,
y: 98.41,
extprop: 'power issue'
}, {
x: 7,
y: 99.18,
extprop: 'flood'
}, {
x: 8,
y: 99.36,
extprop: 'power issue'
}, {
x: 9,
y: 99.31,
extprop: 'flood'
}, {
x: 10,
y: 99.38,
extprop: 'power issue'
}, {
x: 11,
y: 99.20,
extprop: 'flood'
}, {
x: 12,
y: 99.38,
extprop: 'power issue'
}, {
x: 13,
y: 99.32,
extprop: 'flood'
}]
}],
credits: {
enabled: false
}
});
</script>
</html>这是jsfiddle链接：http://jsfiddle.net/wergeld/hj22wbe5/
我想把日期传递给x轴而不是值..。像这样的18-7月-14‘，19-7月-14，20-7月-14.根据日期和百分比绘制图表..。
请帮帮忙
谢谢..。
回答 2
Stack Overflow用户
回答已采纳
发布于 2014-09-09 04:22:21
如果您知道日期并且它们是固定的，例如，请考虑在日期数组下面：
dates: ['18-Jul-14', '19-Jul-14', '20-Jul-14', '18-Jul-14', '19-Jul-14', '20-Jul-14', '18-Jul-14', '19-Jul-14', '20-Jul-14', '18-Jul-14', '19-Jul-14', '20-Jul-14', '19-Jul-14', '20-Jul-14']然后可以使用xAxis:类别在xAxis上显示这些日期，如下所示：
xAxis: {
categories: ['18-Jul-14', '19-Jul-14', '20-Jul-14', '18-Jul-14', '19-Jul-14', '20-Jul-14', '18-Jul-14', '19-Jul-14', '20-Jul-14', '18-Jul-14', '19-Jul-14', '20-Jul-14', '19-Jul-14', '20-Jul-14'],
labels:{rotation: 90, x:-20}
},我给出了更多的选项，比如标签的旋转90度，这是因为没有足够的空间让它们水平地适应，所以现在它们会被垂直显示，就像它们应该的那样。
请看这里的演示
Stack Overflow用户
发布于 2014-09-09 18:58:34
将xAxis类型设置为“日期时间”。
那你也可以
- 将日期作为数据数组的一部分传递
- 使用pointStart和pointInterval处理正确的日期对齐
将类别用于日期既有违直觉，也失去了日期时间轴的所有好处。
参考文献：
- http://api.highcharts.com/highcharts#xAxis.type
- http://api.highcharts.com/highcharts#plotOptions.series.pointStart
- http://api.highcharts.com/highcharts#plotOptions.series.pointInterval
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/25723385
复制相关文章
相似问题
腾讯云开发者
