Question

我正在使用图表，默认情况下，今天有整日数据。我想动态设置起点和终点。

$(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的数据。我正在使用此test data。

注意：在某些情况下，我有多个月的数据，因此应该根据ajax响应start_date和end_date动态设置值。由

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

Answer 1

您可以使用min和max属性设置xAxis极限（请在此处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对象（https://api.highcharts.com/class-reference/Highcharts.Axis#setExtremes）上使用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);
       }
    }
  }

动态设置图形点的起点和终点

1 个答案: