#javascript #highcharts
#javascript #highcharts
Вопрос:
Я пытаюсь установить xAxis
динамические данные динамических данных за последний месяц.
Если месяц последнего значения графика равен 20 августа, он также должен следовать за предыдущими месяцами. например, 19 августа, 18 августа, 17 августа. И если это 20 октября, это должно быть 19 октября, 18 октября, 17 октября.
Highcharts xAxis — datetime
это настройка в соответствии с динамическими данными.
Highcharts.chart('container', {
chart: {
type: 'line'
},
title: {
text: 'Monthly Average Temperature'
},
xAxis: {
type: 'datetime',
labels:{
/*formatter: function(){
var getDate = new Date(this.value);
var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
var mMonth = getDate.getMonth() === 0 ? 11 : getDate.getMonth() - 1;
return months[mMonth] ', ' getDate.getFullYear().toString().substr(-2);
},*/
//offsetY:-10000,
//enable:true,
//distance:100,
//align:'right'
//skew3d:true
//x:-30,
//y: 0
//left:1000
//align: 'left',
},
//tickPixelInterval: 72,
//visible:false,
endOnTick:true,
//endOnTick:true,
//tickmarkPlacement:'on',
//tickWidth: 1,
//min:1
//offset: -30,
//enabled:false,
//offsetX:-100
//
//left: -10
},
yAxis:{
offset:0
},
/*plotOptions: {
line : {
dataLabels : {
enabled : true,
formatter: function() {
var first = this.series.data[0],
last = this.series.data[this.series.data.length - 1];
//return this.x;
if ((this.point.category === first.category amp;amp; this.point.x === first.x) ||
(this.point.category === last.category amp;amp; this.point.x === last.x)) {
console.log(this.x);
//return this.x;
}
return "";
}
},
}
},*/
series: [{
name: 'Tokyo',
data: [
[1596240000000, 5.32],
[1593561600000, 8.12],
[1590969600000, 11.29],
[1588291200000, 5.35],
[1585699200000, 5.99],
[1583020800000, 7.97],
[1580515200000, 6.98],
[1577836800000, 4.59],
[1575158400000, 3.63],
[1572566400000, 3.85],
[1569888000000, 9.98],
[1567296000000, 5.53],
[1564617600000, 9.72],
[1561939200000, 10.61],
[1559347200000, 6.13],
[1556668800000, 8.23],
[1554076800000, 7.77],
[1551398400000, 4.38],
[1548979200000, 5.11],
[1546300800000, 6],
[1543622400000, 5.59],
[1541030400000, 5.35],
[1538352000000, 3.87],
[1535760000000, 1.94],
[1533081600000, 4.33],
[1530403200000, 4.16],
[1527811200000, 3.18],
[1525132800000, 4.38],
[1522540800000, 3.43],
[1519862400000, 7.92],
[1517443200000, 3.45],
[1514764800000, 4.14],
[1512086400000, 3.38],
[1509494400000, 4.99],
[1506816000000, 6.02],
[1504224000000, 4.11],
[1501545600000, 6.19],
[1498867200000, 7.33],
[1496275200000, 5.06],
[1493596800000, 5.01],
[1491004800000, 2.93],
[1488326400000, 1.2]
]
}]
});
/* .highcharts-axis.highcharts-xaxis .highcharts-tick{
transform:translateX(-30px);
} */
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<figure class="highcharts-figure">
<div id="container"></div>
</figure>
Комментарии:
1. Привет @Snehal_tupe, не могли бы вы более точно описать, чего вы хотите достичь? Вам нужно адаптировать все
x
значения к последнемуx
значению?2. Привет @ppotaczek, да, последнее
x
значение оси должно адаптироваться и соответствовать предыдущему месяцу. Например. Если последний месяц заканчивается 20 октября, то предыдущие месяцы должны следовать за 19 октября, 18 октября, 17 октября.
Ответ №1:
Вы можете использовать tickPositioner
и labels.formatter
функции:
xAxis: {
...,
tickPositioner: function() {
var ticks = [],
dataMax = this.dataMax,
oneYear = 1000 * 60 * 60 * 24 * 30 * 12;
for (var i = dataMax; i >= this.dataMin; i -= oneYear) {
ticks.push(i);
}
return ticks.reverse();
},
labels: {
formatter: function() {
return Highcharts.dateFormat('%b %y', this.value);
}
...
}
Живая демонстрация: http: //jsfiddle.net/blackLabel/9cunk5xw/
Ссылка на API:
https://api.highcharts.com/class-reference/Highcharts#.dateFormat