动态设置图形点的开始和结束

Question

我正在使用highcharts,我今天默认拥有全天数据.我想动态设置起点和终点.

$(document).ready(function() {
  $.ajax({
            type:'POST',
            dataType: 'JSON',
            url: "http://localhost/data.php",
        success: function(response) {
        var pointstart=response.start_date;
            console.info(response.start_date+" "+response.end_date);
        $('#graph').highcharts({
            chart: {
                type: 'spline',
                zoomType: 'x'
              },
              xAxis: {
                type: 'datetime',
                setExtremes: (response.start_date,response.end_date),
                tickInterval: 3600 * 1000,
                dateTimeLabelFormats: { // don't display the dummy year
                  month: '%e. %b',
                  year: '%b'
                }
              },
            series:[{
                pointStart      : pointstart,
                pointInterval   : 3600 * 1000,
                name: 'cc',
                data: response.data
            }]
                 });
            },
            cache: false
    });
});

问题:我无法在00:00:00到23:59:59看到图表.我每分钟都有单曲.上图显示了我从12:48:01到23:59:01的数据.我正在使用这个测试数据.

注意:在某些情况下,我有多个月的数据,因此需要根据ajax响应start_date和end_date动态设置值.通过

测试数据:http://dpaste.com/2QQQX49

Answer 1

您可以使用最小和最大属性(请在这里设置X轴极端https://api.highcharts.com/highcharts/xAxis.min,https://api.highcharts.com/highcharts/xAxis.max).默认情况下,它们是未定义的,并且会自动计算值.这就是为什么你的图表从12:48:01到23:59:01呈现 - 适当地对你的数据.

在线示例:https://jsfiddle.net/wchmiel/sL13nhfq/

   xAxis: {
     type: 'datetime',
     tickInterval: 3600 * 1000,
     max: response.end_date,
     min: response.start_date,
     dateTimeLabelFormats: {
       month: '%e. %b',
       year: '%b'
     }
   }

另一种方法是在xAxis对象上使用setExtremes方法(https://api.highcharts.com/class-reference/Highcharts.Axis#setExtremes).例如,当发生加载事件时,您可以进行此操作:

在线示例:https://jsfiddle.net/wchmiel/e42sx7pk/

  chart: {
    type: 'spline',
    zoomType: 'x',
    events: {
       load: function() {
         var chart = this;
         chart.xAxis[0].setExtremes(response.start_date, response.end_date);
       }
    }
  }