高位图表-列范围类型取决于月份
High Chart - columnrange Type depending on months
嗨,每次我使用columnrange类型的Highchart时,我都会从http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/columnrange/并根据我的需要进行了修改,现在我需要月份名称在x轴和y轴上的值都是固定的。目前我无法将x轴数字更改为月份。
我的脚本是:
$(function () {
$('#container').highcharts({
chart: {
type: 'columnrange',
inverted: true
},
title: {
text: 'Employee Bill Pending Detail'
},
subtitle: {
text: 'Month Wise'
},
xAxis: {
categories: ['Bank Bill Pending', 'Clam Pending']
},
yAxis: {
title: {
text: 'Session (2013-14)'
}
},
tooltip: {
valueSuffix: ''
},
plotOptions: {
columnrange: {
dataLabels: {
enabled: true,
formatter: function () {
return this.y ;
}
}
}
},
legend: {
enabled: false
},
series: [{
name: 'Months',
data: [
[1, 4], // Here the [1,4] denotes months between 'Jan' & 'Apr'.
[2, 8] // Here the [2,8] denotes months between 'Feb' & 'Aug'.
]
}]
});
});
任何帮助都是非常可观的。
这其实很容易。API相关文件:
- 日期格式()
- yAxis.type
你需要这样设置你的数据(或者使用显式的js时间戳):
series: [{
name: 'Months',
data: [
[Date.UTC(2013, 0, 1), Date.UTC(2013, 3, 1)], // Here the [1,4] denotes months between 'Jan' & 'Apr'.
[Date.UTC(2013, 2, 1), Date.UTC(2013, 7, 1)] // Here the [2,8] denotes months between 'Feb' & 'Aug'.
]
}]
请注意,Data.UTC()
是基于零的,因此一月是"0"。该列表中的最后一个元素是日期。由于你的数据是按月计算的,所以我把它定为"1"。当dataLabel
和tooltip
由dateFormat
处理时,您可以在这里拥有您想要的任何内容。
示例jsFiddle。
相关文章:
- 输入类型范围在angularjs重复内不起作用
- 样式<输入类型=“范围”>用于重定向,在触摸设备上不起作用
- 使用 PHP 获取输入类型范围的值
- Babel/RequireJS + 类型“范围错误:超出最大调用堆栈大小”
- 使用 AngularJS 1.2 绑定输入编号上的输入类型范围
- 输入类型范围最小属性中的角度JS表示法
- 根据第一个询问的输入设置输入类型范围的最小值
- 如何使用类型范围输入的值来设置jQuery UI Slider的值
- HTML5输入类型范围-非线性序列
- AngularJS$apply在输入类型范围的ngChange之后不起作用
- 带有hammerjs滑动检测的输入类型范围在移动safari上不可用
- 可以't计算html输入类型范围的值
- 相对于输入的绝对定位[类型=范围]
- Ipad上的虚拟键盘使输入[类型=范围]滑块拇指消失
- 使用值动态更改输入id-输入类型=范围
- HTML输入类型范围
- 输入类型范围不工作的isscroll 5
- 输入类型范围内的进度条
- jQuery动态更新输入类型范围
- 完成滑动输入类型=“范围”后触发函数