Блог

Главная - Вопросы по программированию - Как отобразить данные за последние 7 дней

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

#javascript #highcharts

#javascript #графики

Вопрос:

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

например, если сегодня 04.05.2019, на графике будут отображаться данные с 30-03-2019 по 05-04-2019 (7 дней), а на графике areaspline есть 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]
	});
});

Ответ №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

Комментарии:

1. большое спасибо, но почему на вашей демонстрационной диаграмме отображаются данные с 6 апреля по 1 июня, она должна отображать данные за последние 7 дней с 31 марта по 6 апреля ..??

2. спасибо, но не исправлено, просто вопрос, если мне не нравятся данные: [88, 96, 97, 105, 106,84,86] но [Дата.UTC(2019, 04-1, 02), 0 ], [ Дата.UTC(2019, 04-1, 03), 35 ], я сделал это в areaspline, если всегда оставаться высоким в 35, даже если нет данных tomorow..it должно снизиться, но не

3. Добавлен один пример с предложенным типом данных, похоже, работает нормально.