Блог

Главная - Вопросы по программированию - Highcharts js установил данные по оси x за последний месяц

Highcharts js установил данные по оси x за последний месяц

#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

https://api.highcharts.com/highcharts/xAxis.tickPositioner