我想用导航器,范围选择器,y轴从两侧和图形扇区创建条形线图。我使用Highcharts.Chart()
实现它,但它的x轴不正确。当我在将类别更改为[“2017-2-3”]之后正确创建x轴时,范围选择器将转到1970(默认值),因此我将日期转换为毫秒。现在在x轴上有不需要的值。我想要仅显示类别数组中显示的x轴值。目前1m,3m,6m未工作我认为这是因为这个x轴问题。
的jsfiddle:http://jsfiddle.net/m05sgk3j/1/
$(document).ready(function() {
var categories = [1551420000000,1549000800000,1546322400000,1543644000000,1541052000000, 1538373600000, 1535781600000,1533103200000, 1530424800000, 1527832800000, 1525154400000, 1522562400000, 1519884000000, 1517464800000,1514786400000];
new Highcharts.Chart({
chart: {
renderTo: 'container'
},
title: {
text: 'In March 2019, the average CT_HOURS is 10.55 hours.'
},
rangeSelector: {
enabled: true,
buttons: [{
type: 'millisecond',
count: 1,
text: '1m'
}, {
type: 'millisecond',
count: 3,
text: '3m'
}, {
type: 'millisecond',
count: 6,
text: '6m'
}, {
type: 'all',
text: 'All'
}],
selected: 4,
inputDateFormat: '%Y-%m-%d',
inputEditDateFormat: '%Y-%m-%d'
},
navigator: {
enabled: true,
xAxis: {
tickInterval: 15,
labels: {
/* formatter: function() {
return categories[this.pos]
} */
}
}
},
scrollbar: {
enabled: true
},
xAxis: {
// categories: categories,
type: 'datetime',
tickInterval : 2,
// tickInterval: {_tickInterval},
/* labels: {
step:10
}, */
/* maxZoom: 30 * 24 * 3600000, */
dateTimeLabelFormats : {
day: '%Y-%m'
}
// crosshair: true,
// minRange: 1
},
yAxis: [{ // Primary yAxis
labels: {
format: '{value}h',
style: {
color: Highcharts.getOptions().colors[1]
}
},
title: {
text: 'AVERAGE CT_HOURS',
style: {
color: Highcharts.getOptions().colors[1]
}
}
}, { // Secondary yAxis
title: {
text: 'REQUEST COUNT',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value}',
style: {
color: Highcharts.getOptions().colors[0]
}
},
opposite: true
}],
series: [{
name: 'REQUEST COUNT',
type: 'column',
yAxis: 1,
data: [
[1551420000000, 49.9],
[1549000800000, 71.5],
[1546322400000, 106.4],
[1543644000000, 129.2],
[1541052000000, 144.0],
[1538373600000, 176.0],
[1535781600000, 135.6],
[1533103200000, 148.5],
[1530424800000, 49.9],
[1527832800000, 71.5],
[1525154400000, 106.4],
[1522562400000, 129.2],
[1519884000000, 144.0],
[1517464800000, 176.0],
[1514786400000, 135.6]
],
tooltip: {
valueSuffix: ''
}
}, {
name: 'AVERAGE CT_HOURS',
type: 'spline',
data: [[1551420000000, 56.6],
[1549000800000, 46.3],
[1546322400000, 32.8],
[1543644000000, 43.4],
[1541052000000, 40.8],
[1538373600000, 43.0],
[1535781600000, 43.1],
[1533103200000, 44.6],
[1530424800000, 45.7],
[1527832800000, 27.8],
[1525154400000, 39.9],
[1522562400000, 29.3],
[1519884000000, 27.9],
[1517464800000, 27.4],
[1514786400000, 17.6]],
tooltip: {
valueSuffix: 'h'
}
}]
});
});
首先,您有未分类的数据。如果要反转数据,请使用reversed
选项。
此外,rangeSelector
和tickInterval
是错误的。如果使用datetime
轴,则基本单位为1毫秒。
但是,要仅显示categories
数组中的日期,请使用tickPositions
选项和formatter
函数作为标签:
xAxis: {
reversed: true,
minRange: 1,
type: 'datetime',
tickPositions: categories,
labels: {
formatter: function() {
return Highcharts.dateFormat('%Y-%m', this.value);
}
}
},
现场演示:http://jsfiddle.net/BlackLabel/a6Lphq4k/
API参考:
https://api.highcharts.com/highcharts/xAxis.reversed
https://api.highcharts.com/highcharts/xAxis.tickPositions
https://api.highcharts.com/highcharts/xAxis.labels.formatter