动态更改X轴上的日期

Question

我有一个图表，我的x轴是时间表，我需要时间线才能根据我的数据动态更改。例如：如果日期范围（在我的数据中）很大，我需要轴显示几个月，如果范围很小，则几天。生病试图使它更清楚：我有一系列日期：'09/07/2016' - '09/02/2016'-我的轴需要根据几天来显示我的数据。但：如果我的范围是：'09/07/2016' - '09/02/2017'，那么我的轴需要显示几个月或四分之一，因为这两个日期之间的差距更大。有可能吗？

Answer 1

根据图表api，时间尺度是您要使用的时间尺度。但是，该量表不会根据数据集中日期跨度的范围自动调整显示格式。

您将必须实现自己的JavaScript函数，该功能将根据所选数据更改所需内容的比例选项。这听起来很具有挑战性，但是如果您考虑的话，这确实不是。

实际上，由于您将为您的用户提供过滤数据的方法，因此您已经必须实现类似的功能，该功能将更改图表中的基础数据（用户设置过滤器），然后重新使用渲染图表（通过使用.update()原型方法实现）。

在相同的功能中，实现逻辑以确定适当的时间尺度显示格式（基于数据的跨度），并且只需更新图表比例选项（在调用.update()之前）即可。这是下面的示例。

假设您在HTML中使用.date-filter类的某种日期范围选择框...

// initial chart definition
var chart = new Chart($('#myChart'), {
  type: 'line',
  data: {
    labels: [/* chart labels */],
    datasets: [{
      data: { /* chart data */},
    }]
  },
  options: { /* options...including time scale options */}
});
// change handler on the date filter drop down which changes the chart data and time scale options
$( ".date-filter" ).change(function() {
  var selectedRange = $(this).val();
  var parsedStartDate = // use selectedRange to parse start date
  var parsedEndDate = // use selectedRange to parse end date
  var dayMagnitude = // use moment.js to calculate difference in start/end in days
  if (daysMagnitude < 30) {
    // configure time scale displayFormat in terms of days
  } else if (daysMagnitude < 90) {
    // configure time scale displayFormat in terms of months
  } else if (daysMagnitude < 180) {
    // configure time scale displayFormat in terms of quarters
  } 
  // ...
  // update the underlying chart data by accessing the underlying dataset that you are modifying
  chart.data.datasets[0].data = // new data object based on the filter criteria
  // update the time scale options
  chart.options.scales.yAxes = // updated time scale options
  // re-render your chart
  chart.update();
});

Answer 2

您要寻找的是：

chart.options.scales.xAxes[0].time.unit = 'hour';
chart.update();

表明您只需要一天（24小时）的数据，因此如上所述，按小时进行。

更多信息：
https://www.chartjs.org/docs/latest/axes/cartesian/time.html