Как отобразить данные за последние 7 дней

Question

привет, может кто-нибудь помочь мне, я хочу отобразить данные последних семи дней на моем графике, он работает в этом типе графиков https://www.highcharts.com/demo/line-time-series, но не работает в https://www.highcharts.com/demo/areaspline

например, если сегодня 05/04/2019, на диаграмме будут отображаться данные с 30-03-2019 по 05-04-2019 (7 дней), а на графике областей есть pointStart, но как сделать его динамичным для отображения за последние 7 дней? вот мой пример

$(function() {
	Highcharts.setOptions({lang:{thousandsSep:","}});
	$('#container').highcharts({
		chart:{
			type:'areaspline',
			zoomType: 'x'
			},
		title:{
		    text:null,
			margin:0,
			floating:true,
			verticalAlign:'bottom',
			x:0,
			y:0	
		},	
		xAxis:{
			type:'datetime',
			maxZoom:48*3600*1000	
		},
		plotOptions:{
			series:{
				pointStart: Date.UTC(2019, 03-1, 30),
                pointInterval: 24 * 3600 * 1000 // one day
		
			}
		},
		yAxis:{
			title:{
				text:null,
			},
		},		
		credits:{
			enabled:false
		},				
		series:[{
			showInLegend:false,
			name:"Dollar",
			data:[1,0.5,3,2,5,2.5]
	});
});

Answer 1

Вы можете использовать tickPositioner, чтобы вернуть точку 7-дневных позиций за последние 7 дней.

Точка начала должна быть установлена ​​с текущей датой, которую вы можете сделать следующим образом:

pointStart: Date.UTC(d.getUTCFullYear(), d.getUTCMonth(), d.getUTCDate()),

var d = new Date();
d.setDate(d.getDate() - 7);
Highcharts.chart('container', {
  chart: {
    type: 'areaspline',
    zoomType: 'x'
  },
  xAxis: {
    type: 'datetime',
    maxZoom: 48 * 3600 * 1000,

    tickInterval: 24 * 3600 * 1000,
    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: 1,
        higherRanks: {},
        totalRange: interval * count
      }
      return ticks;
    }

  },


  series: [{
    showInLegend: false,
    name: "Dollar",
    data: [88, 96, 97, 105, 0,84,86],
    pointStart: Date.UTC(d.getUTCFullYear(), d.getUTCMonth(), d.getUTCDate()),
    pointInterval: 24 * 3600 * 1000 // seven days
  }]

});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container"></div>

Для различных типов данных:

var d = new Date();
d.setDate(d.getDate() - 7);
Highcharts.chart('container', {
  chart: {
    type: 'areaspline',
    zoomType: 'x'
  },
  xAxis: {
    type: 'datetime'  
  },
  series: [{
    showInLegend: false,
    name: "Dollar",
    data: [
    [Date.UTC(d.getUTCFullYear(), d.getUTCMonth(), d.getUTCDate()),88],
    [Date.UTC(d.getUTCFullYear(), d.getUTCMonth(), d.getUTCDate()+1),89],
    [Date.UTC(d.getUTCFullYear(), d.getUTCMonth(), d.getUTCDate()+2),0],
    [Date.UTC(d.getUTCFullYear(), d.getUTCMonth(), d.getUTCDate()+3),102],
    [Date.UTC(d.getUTCFullYear(), d.getUTCMonth(), d.getUTCDate()+4),114],
    [Date.UTC(d.getUTCFullYear(), d.getUTCMonth(), d.getUTCDate()+5),120]],
  }]

});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container"></div>

Ссылки API:

https://api.highcharts.com/highcharts/xAxis.tickPositioner https://api.highcharts.com/highcharts/series.line.pointStart