Chart JS - 为 x 轴时间序列设置周开始答案

【问题标题】：Chart JS - set start of week for x axis time seriesChart JS - 为 x 轴时间序列设置周开始
【发布时间】：2016-12-16 09:20:53
【问题描述】：

使用 ChartJS 2.4，我正在查询两个日期之间的一组记录：

      startDate: '2016-11-05T18:06:17.762Z'
      endDate: '2016-12-05T18:06:17.762Z'

鉴于规模配置，我想在用户选择的日期范围内开始一周...

 isoWeekday: true,
 type: 'time',
 unitStepSize: 1,
 time: {
   displayFormats: {
     'week': 'MMM DD'
   },
   unit: 'week',
 },

这让我得到一个截断的图表：

因此，如果没有返回开始日期 11/5 的记录，我会在数组的开头手动插入数据，值为 0 只是为了确保显示用户期望的开始日期：

  if (scope.chart_data.labels.indexOf('11/5') == -1) {
    scope.chart_data.labels.unshift('11/5');
    scope.chart_data.datasets[0].data.unshift(0);
  }

除非这样做会尴尬地将图表延长一周而没有数据...并且不会在 11/5 开始一周：

如何在11/5 或我想要的任何一周开始图表，并从那里增加unit: week 配置？

如果我删除 unit: week 并使用 unitStepSize: 7 手动设置步长，它会在开始时执行我想要的操作，但由于某种原因在最后一个标签中糊涂了：

在time 对象中使用min max，

   max: scope.end_display, // 12/05/2016
   min: scope.start_display // 11/05/2016

我明白了：

为什么不会在 11/5 开始折线图？

标签：

["11/05/2016", "11/06/2016", "11/07/2016", "11/08/2016", "11/09/2016", "11/13/2016", "11/15/2016", "11/16/2016", "11/17/2016", "11/20/2016", "11/27/2016", "11/28/2016", "11/29/2016", "12/01/2016", "12/04/2016"]

数据：

[0, 3, 2, 1, 1, 7, 3, 2, 26, 2, 6, 3, 1, 1, 1]

【问题讨论】：

标签： javascript angularjs charts time-series chart.js

【解决方案1】：

我意识到我在这方面已经很晚了，但也许你应该尝试将distribution 选项设置为series。请参阅此处的文档：

规模分布

distribution 属性控制数据沿规模：

'linear': data are spread according to their time (distances can vary)
'series': data are spread at the same distance from each other

这应该可以解决您在间距被弄乱的地方出现的奇怪格式。

【讨论】：

【解决方案2】：

您应该修改轴设置以设置最大值和最小值（可能是开始-结束日期范围）。一个例子（注意！使用您自己需要的格式）：

time: {
  unit: 'month',
  displayFormats: {
     month: 'MM'
  },
  max: moment(data.end_date).format('MM'),
  min: monent(data.start_date).format('MM')
}

【讨论】：

谢谢你，但它会导致同样的问题。见上面的编辑
你说它不是在 11/5 开始的，但在你提供的屏幕上却是这样？您可以尝试创建一个小提琴吗？

【解决方案3】：

您可以将isoWeekday: true 添加到time 配置中

https://www.chartjs.org/docs/latest/axes/cartesian/time.html

【讨论】：