本文介绍了在Highcharts xAxis上显示12个月的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在这个小提琴中：
http：// jsfiddle/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 = code.highcharts/highcharts.js >< /脚本> < script src =code.highcharts/highcharts-more.js>< / script> < script src =code.highcharts/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（fonts.googleapis/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 :
jsfiddle/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="code.highcharts/highcharts.js"></script> <script src="code.highcharts/highcharts-more.js"></script> <script src="code.highcharts/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(fonts.googleapis/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 },try this link
hope it helps.
更多推荐
在Highcharts xAxis上显示12个月
发布评论