Я хочу создать линейчатые графики с помощью навигатора, селектора диапазона, оси Y с обеих сторон и сектора графика. Я реализую его, используя Highcharts.Chart(), но его ось X не работает должным образом. Когда я правильно создаю ось X после изменения категорий на ["2017-2-3 '], то селектор диапазона переходит на 1970 (значение по умолчанию), поэтому я преобразую дату в миллисекунды. Теперь на оси X есть нежелательные значения. Я хочу показывать только значения по оси X, которые отображаются в массиве категорий. В настоящее время 1м, 3м, 6м не работает, я думаю, что это происходит из-за этой проблемы по оси х.
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'
}
}]
});
});