如何在高图表的X轴上设置每周范围? [英] How to set weekly range in X Axis of High Chart?
本文介绍了如何在高图表的X轴上设置每周范围?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个图表,需要将X轴设置为每周范围. 从1月-3月开始.如何将X间隔设置为7天?
I have a Chart where I need to set X axis to a weekly range. Starting from January - march.How can i set the X interval to 7 days range?
我需要的是每7天出现一次的要点.累了几种方法,但似乎不起作用.我已经附上了我到目前为止所做的事情.
What I need is the points to appear every 7 days time period. Tired a few ways but it doesn't seem to work. I have attached what I've done so far.
Highcharts.chart('container', {
title: {
text: 'Fee Collected'
},
subtitle: {
text: 'Actual Vs Budget'
},
yAxis: {
title: {
text: '%'
},
min: 80,
max:120
},
xAxis: {
type: 'datetime',
labels: {
style: {
fontFamily: 'Tahoma'
},
rotation: -45
},
tickInterval: 24 * 3600 * 1000
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
plotOptions: {
series: {
pointStart: 0
}
},
series: [{
data: [88,90,88,96,97,105,106,110,118],
pointStart: Date.UTC(2010, 0, 1),
pointInterval: 24 * 3600 * 1000 // one day
}]
});
#container {
min-width: 310px;
max-width: 800px;
height: 400px;
margin: 0 auto
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container"></div>
推荐答案
tickPositioner 和tickInterval: 24 * 3600 * 1000 * 7
持续7天
Highcharts.chart('container', {
title: {
text: 'Fee Collected'
},
subtitle: {
text: 'Actual Vs Budget'
},
yAxis: {
title: {
text: '%'
},
min: 80,
max: 120
},
xAxis: {
type: 'datetime',
labels: {
style: {
fontFamily: 'Tahoma'
},
rotation: -45
},
tickInterval: 24 * 3600 * 1000 * 7,
/*seven days*/
tickPositioner: function(min, max) {
var interval = this.options.tickInterval,
ticks = [],
count = 0;
while (min < max) {
ticks.push(min);
min += interval;
count++;
}
ticks.info = {
unitName: 'day',
count: 7,
higherRanks: {},
totalRange: interval * count
}
return ticks;
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
plotOptions: {
series: {
pointStart: 0
}
},
series: [{
data: [88, 90, 88, 96, 97, 105, 106, 110, 118],
pointStart: Date.UTC(2009, 0, 1),
pointInterval: 24 * 3600 * 1000 * 7 // seven days
}]
});
#container {
min-width: 310px;
max-width: 800px;
height: 400px;
margin: 0 auto
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container"></div>
这篇关于如何在高图表的X轴上设置每周范围?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文