如何显示最近7天的数据

Question

嗨，有人可以帮我吗，我想在图表中显示过去7天的数据，它在此图表类型https://www.highcharts.com/demo/line-time-series中有效，但在https://www.highcharts.com/demo/areaspline中无效

例如，如果今天是05/04/2019，图表将显示从30-03-2019到05-04-2019（7天）的数据，而Areapline chart具有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