在Highcharts xAxis上显示12个月 [英] Display 12 months on Highcharts xAxis
本文介绍了在Highcharts xAxis上显示12个月的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在这个小提琴中：
http：// jsfiddle.net/ot24zrkt/113/
我正在显示Jan& 2月这些显示正确。不过，我试图在xAxis上显示一年的整个月份范围（1月 - 12月）。所以折线图不应该在3月至12月间显示。所有12个月的年份都应显示在xAxis上。如何在xAxis上显示12个月的年份，同时在适用于数据的图表上绘制线条？
为了实现这个目的，我尝试在xAxis上设置类别：
类别：'['Jan'，'Feb'，'Mar'，'Apr'，'May'，'Jun'，'Jul'，'Aug'，'Sep'，'Oct'，'Nov'，'Dec ']`
但是这并没有达到预期的效果，相反，xAxis上没有显示任何值。 / b>
小提琴代码：
HTML：
<脚本SRC = https://code.highcharts.com/highcharts.js >< /脚本>
< script src =https://code.highcharts.com/highcharts-more.js>< / script>
< script src =https://code.highcharts.com/modules/exporting.js>< / script>
< div id =container2style =width：500px; height：400px; margin：1.5em 1em;>< / div>
< script>
var d = new Date（）;
var pointStart = d.getTime（）;
Highcharts.setOptions（{
global：{
useUTC：false
}，
colors：[
'rgba（0，154，253，0.9 ）'，//明亮的蓝色
'rgba（253，99，0，0.9）'，//明亮的橙色
'rgba（40，40，56，0.9）'，//黑暗的
'rgba（253，0，154，0.9）'，//明亮的粉红色
'rgba（154,253,0,0.9）'，//明亮的绿色
'rgba（145，44 ，138，0.9）'，//中紫色
'rgba（45，47，238，0.9）'，//中蓝色
'rgba（177，69，0，0.9）'，/ /深橙
'rgba（140,140,156,0.9）'，//中
'rgba（238,46,47,0.9）'，//中红
'rgba （44,145,51,0.9）'// //中间绿色
'rgba（103,16,192,0.9）'//暗紫色
]，
图表：{
alignTicks：false，
type：''，
margin：[60,25,100,90]，
// borderRadius：10，
// borderWidth：1，
//borderColor:'rgba(156,156,156,.25） '
//backgroundColor:'rgba(204,204,204,.25）'，
// plotBackgroundColor：RGBA（255,255,255,1 ）'，
style：{
fontFamily：'Abel，serif'
}
}，
标题：{
text：'Test Chart Title' ，
align：'left'，
margin：10，
x：50，
style：{
fontWeight：'bold'，
color：' rgba（0,0,0，.9）'
}
}，
字幕：{
text：'测试图表副标题'，
align：'left '，
x：52，
}，
图例：{enabled：true}，
plotOptions：{
area：{
lineWidth：1，
marker：{
enabled：false，
symbol：'circle'，
radius：4
}
}，
arearange：{
lin eWidth：1
}，
areaspline：{
lineWidth：1，
marker：{
enabled：false，
symbol：'circle'，
半径：4
}
}，
areasplinerange：{
lineWidth：1
}，
boxplot：{
groupPadding： 0.05，
pointPadding：0.05，
fillColor：'rgba（255,255,255，.75）'
}，
bubble：{
minSize：'0.25％'，
maxSize：'17％'
}，
列：{
//堆叠：'普通'，
groupPadding：0.05，
pointPadding：0.05
}，
列宽：{
groupPadding：0.05，
pointPadding：0.05
}，
错误列：{
groupPadding：0.05，
pointPadding：0.05，
showInLegen d：true
}，
line：{
lineWidth：1，
marker：{
enabled：false，
symbol：'circle'，
半径：4
}
}，
scatter：{
标记：{
符号：'circle'，
半径：5
$ b $ {b $ b $ lineWidth：1，
marker：{
enabled：false，
symbol：'circle'，
半径：4
}
}，
系列：{
shadow：false，
borderWidth：0，
states：{
hover：{
lineWidthPlus：0，
}
}
}
}，
xAxis：{
title：{
文本：'X轴标题'，
旋转：0，
textAlign：'center'，
style：{
color：'rgba（0,0,0，.9）'
}
}，
标签：{
style：{
color：'rgba（0,0,0，.9）'，
fontSize：'9px'
}
} ，
lineWidth：.5，
lineColor：'rgba（0,0,0，.5）'，
tickWidth：.5，
tickLength：3，
tickColor：'rgba（0,0,0，.75）'
}，
yAxis：{
minPadding：0，
maxPadding：0，
gridLineColor ：'rgba（204,204,204，.25）'，
gridLineWidth：0.5，
title：{
text：'Y Axis< br /> Title'，
rotation：0 ，
textAlign：'right'，
style：{
color：'rgba（0,0,0，.9）'，
}
}，
标签：{
style：{
color ：'rgba（0,0,0，.9）'，
fontSize：'9px'
}
}，
lineWidth：.5，
lineColor： 'rgba（0,0,0，.5）'，
tickWidth：.5，
tickLength：3，
tickColor：'rgba（0,0,0，.75）'
}
}）;
< / script>
CSS：
@import URL（https://fonts.googleapis.com/css?family=Changa+One|Loved+by+the+King|Fredericka+在+大| Droid的衬线+：400,700,400italic |亚伯|奥斯瓦尔德：400300700）;
body {
font-family：Abel，Calibri，Helvetica，sans-serif;
font-size：95％;
}
Javascript：
var chart;
var pointStart = Date.UTC（2014,0,1）;
$（函数（）{
$（'＃container2'）。highcharts（{
图表：{type：'line'}，
title：{ }，
subtitle：{}，
legend：{enabled：true}，
tooltip：{}，
plotOptions：{
series：{
pointStart：pointStart，
pointInterval：24 * 3600 * 1000
}
}，
XAXIS：{
类型： '日期时间'，
tickInterval：24 * 3600 * 1000，//一天
标签：{
rotation：0
}，
类别：['Jan'，'Feb'，'Mar'，'Apr '，'May'，'Jun'，'Jul'，'Aug'，'Sep'，'Oct'，'Nov'，'Dec']
}，
yAxis：{}
$）$;
chart = $（'＃container2'）。highcharts（）;
var jsonString ='[ {date：2014-1-01，in：30，out：21}，{date：2014-1-02，in：35 ，out：32}，{date：2014-1-03，in：23，out：34}，{date：2014-1- 04，in：20，out：15}，{date：2014-1-05，in：34，out：20}， {date：2014-2-06，in：22，out：34}，{date：2014-2-07，in：15 ，out：18}]';
var myData = JSON.parse（jsonString）;
var dataArray = []
$ .each（myData，function（i，obj）{
console.log（obj.date）
var d = new Date（obj.date）
dataArray.push（[Date.parse（d），parseInt（obj.in）]）
}）;
chart.addSeries（{
data：dataArray
}）;
console.log（'data is'+ dataArray）
}）
plotOptions：{$ =h2_lin>解决方案 b $ b系列：{
pointStart：pointStart，
pointInterval：24 * 3600 * 1000 * 30
}
}，
xAxis：{
min ：Date.UTC（2014，0，0），
max：Date.UTC（2014,11,1），
allowDecimals：false，
类型：'datetime'，
tickInterval：24 * 3600 * 1000 * 30，//一天
标签：{
rotation：0
}，
希望它有帮助。
In this fiddle :
http://jsfiddle.net/ot24zrkt/113/
I'm displaying data for a dates over months in Jan & Feb. These are being displayed correctly. However I'm attempting to display the entire range of months for a year - (Jan - Dec) on the xAxis. So the line graph should not display for months Mar - Dec. All twelve months of year should be displayed on xAxis. How to display 12 months of year on xAxis while just drawing line on chart applicable to the data ?
To achieve this I tried setting categories on the xAxis :
categories : `['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']`
But this is not having desired effect, instead no values on xAxis are being displayed.
fiddle code :
HTML :
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container2" style="width:500px;height:400px;margin:1.5em 1em;"></div>
<script>
var d = new Date();
var pointStart = d.getTime();
Highcharts.setOptions({
global: {
useUTC:false
},
colors: [
'rgba( 0, 154, 253, 0.9 )', //bright blue
'rgba( 253, 99, 0, 0.9 )', //bright orange
'rgba( 40, 40, 56, 0.9 )', //dark
'rgba( 253, 0, 154, 0.9 )', //bright pink
'rgba( 154, 253, 0, 0.9 )', //bright green
'rgba( 145, 44, 138, 0.9 )', //mid purple
'rgba( 45, 47, 238, 0.9 )', //mid blue
'rgba( 177, 69, 0, 0.9 )', //dark orange
'rgba( 140, 140, 156, 0.9 )', //mid
'rgba( 238, 46, 47, 0.9 )', //mid red
'rgba( 44, 145, 51, 0.9 )', //mid green
'rgba( 103, 16, 192, 0.9 )' //dark purple
],
chart: {
alignTicks:false,
type:'',
margin:[60,25,100,90],
//borderRadius:10,
//borderWidth:1,
//borderColor:'rgba(156,156,156,.25)',
//backgroundColor:'rgba(204,204,204,.25)',
//plotBackgroundColor:'rgba(255,255,255,1)',
style: {
fontFamily: 'Abel,serif'
}
},
title: {
text:'Test Chart Title',
align:'left',
margin:10,
x: 50,
style: {
fontWeight:'bold',
color:'rgba(0,0,0,.9)'
}
},
subtitle: {
text:'Test Chart Subtitle',
align:'left',
x: 52,
},
legend: { enabled: true },
plotOptions: {
area: {
lineWidth:1,
marker: {
enabled:false,
symbol:'circle',
radius:4
}
},
arearange: {
lineWidth:1
},
areaspline: {
lineWidth:1,
marker: {
enabled:false,
symbol:'circle',
radius:4
}
},
areasplinerange: {
lineWidth:1
},
boxplot: {
groupPadding:0.05,
pointPadding:0.05,
fillColor:'rgba(255,255,255,.75)'
},
bubble: {
minSize:'0.25%',
maxSize:'17%'
},
column: {
//stacking:'normal',
groupPadding:0.05,
pointPadding:0.05
},
columnrange: {
groupPadding:0.05,
pointPadding:0.05
},
errorbar: {
groupPadding:0.05,
pointPadding:0.05,
showInLegend:true
},
line: {
lineWidth:1,
marker: {
enabled:false,
symbol:'circle',
radius:4
}
},
scatter: {
marker: {
symbol: 'circle',
radius:5
}
},
spline: {
lineWidth:1,
marker: {
enabled:false,
symbol:'circle',
radius:4
}
},
series: {
shadow: false,
borderWidth:0,
states: {
hover: {
lineWidthPlus:0,
}
}
}
},
xAxis: {
title: {
text: 'X Axis Title',
rotation:0,
textAlign:'center',
style:{
color:'rgba(0,0,0,.9)'
}
},
labels: {
style: {
color: 'rgba(0,0,0,.9)',
fontSize:'9px'
}
},
lineWidth:.5,
lineColor:'rgba(0,0,0,.5)',
tickWidth:.5,
tickLength:3,
tickColor:'rgba(0,0,0,.75)'
},
yAxis: {
minPadding:0,
maxPadding:0,
gridLineColor:'rgba(204,204,204,.25)',
gridLineWidth:0.5,
title: {
text: 'Y Axis<br/>Title',
rotation:0,
textAlign:'right',
style:{
color:'rgba(0,0,0,.9)',
}
},
labels: {
style: {
color: 'rgba(0,0,0,.9)',
fontSize:'9px'
}
},
lineWidth:.5,
lineColor:'rgba(0,0,0,.5)',
tickWidth:.5,
tickLength:3,
tickColor:'rgba(0,0,0,.75)'
}
});
</script>
CSS :
@import url(https://fonts.googleapis.com/css?family=Changa+One|Loved+by+the+King|Fredericka+the+Great|Droid+Serif:400,700,400italic|Abel|Oswald:400,300,700);
body {
font-family:Abel, Calibri, Helvetica, sans-serif;
font-size:95%;
}
Javascript :
var chart;
var pointStart = Date.UTC(2014,0,1);
$(function() {
$('#container2').highcharts({
chart : { type : 'line' },
title : { },
subtitle : { },
legend : { enabled : true },
tooltip : { },
plotOptions : {
series : {
pointStart : pointStart,
pointInterval : 24 * 3600 * 1000
}
},
xAxis : {
type : 'datetime',
tickInterval : 24 * 3600 * 1000, //one day
labels : {
rotation : 0
},
categories : ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']
},
yAxis : { }
});
chart = $('#container2').highcharts();
var jsonString = '[ { "date": "2014-1-01", "in": "30", "out": "21" }, { "date": "2014-1-02", "in": "35", "out": "32" }, { "date": "2014-1-03", "in": "23", "out": "34" }, { "date": "2014-1-04", "in": "20", "out": "15" }, { "date": "2014-1-05", "in": "34", "out": "20" }, { "date": "2014-2-06", "in": "22", "out": "34" }, { "date": "2014-2-07", "in": "15", "out": "18" } ]';
var myData = JSON.parse(jsonString);
var dataArray = []
$.each(myData, function(i, obj) {
console.log(obj.date)
var d = new Date(obj.date)
dataArray.push([Date.parse(d), parseInt(obj.in)])
});
chart.addSeries({
data: dataArray
});
console.log('data is '+dataArray)
})
解决方案
I have made the change following change:
plotOptions : {
series : {
pointStart : pointStart,
pointInterval : 24 * 3600 * 1000*30
}
},
xAxis : {
min:Date.UTC(2014, 0, 0),
max:Date.UTC(2014, 11, 1),
allowDecimals: false,
type : 'datetime',
tickInterval : 24 * 3600 * 1000*30, //one day
labels : {
rotation : 0
},
hope it helps.
这篇关于在Highcharts xAxis上显示12个月的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
