chartjs的时标格式问题，主要是unitStepSize

Question

我很喜欢chartjs，但是在时间范围上，我一直难以获得确切的格式。我所追求的是以下几点：

• 标签永远不应该是对角线（理想情况下-不能大张旗鼓）
• 理想情况下，我可以在刻度线中指定最小间距，以避免出现上述情况，例如7天

我一直在使用以下xAxes设置：

xAxes: [{
  type: 'time',
  unit: 'day',
  unitStepSize: 10,
  minUnit: 'day',
  time: {
    displayFormats: {
      day: 'D-MMM',
      week: 'D-MMM',
      month: 'D-MMM',
      quarter: 'D-MMM',
    }
  }
}]

我的日期以“ YYYY-MM-DD”格式使用。

现在它似乎忽略了unitStepSize。

可以在这里找到完整的示例：https : //jsfiddle.net/koendirckx/fqhv8cjs/5/

Answer 1

在自己为同一问题奋斗了很长时间之后，我终于注意到Chartjs文档中的详细内容， 该文档位于http://www.chartjs.org/docs/#scales-time-units该unitStepSize参数需要定义在时间子选项中。

我在做：

 scales: {
                xAxes: [{
                    type: "time",
                    time: {
                        unit: 'day',
                        displayFormats: {
                            day: 'MMM DD',
                        },
                    },
                    ticks: {
                        fontColor: "black",
                        fontSize: 12,
                        fontStyle: "normal",
                        fontFamily: "Segoe UI",
                    },
                    unitStepSize: 7,
                }],
                yAxes: yAxes
            },

当我应该做的时候：

 scales: {
                xAxes: [{
                    type: "time",
                    time: {
                        unit: 'day',
                        displayFormats: {
                            day: 'MMM DD',
                        },
                        unitStepSize: 7,
                    },
                    ticks: {
                        fontColor: "black",
                        fontSize: 12,
                        fontStyle: "normal",
                        fontFamily: "Segoe UI",
                    },
                }],
                yAxes: yAxes
            },

在更广泛的上下文中：（请注意eleChart1是图表的画布DOM元素，而yAxis，数据集和ChartName是在示例之外构建的对象/变量。）

var Chart1 = new Chart(eleChart1, {
        type: 'line',
        lineWidth: 15,
        data: {
            datasets: datasets,
        },
        options: {
            showPointLabels: true,
            legend: {
                display: true,
                //position: "bottom"

            },
            title: {
                display: true,
                text: ChartName,
                fontSize: 18,
                fontStyle: "bold",
                fontFamily: "Segoe UI"
            },
            scales: {
                xAxes: [{
                    type: "time",
                    time: {
                        unit: 'day',
                        displayFormats: {
                            day: 'MMM DD',
                        },
                        unitStepSize: 7,
                    },
                    ticks: {
                        fontColor: "black",
                        fontSize: 12,
                        fontStyle: "normal",
                        fontFamily: "Segoe UI",
                    },
                }],
                yAxes: yAxes
            },
        }
    });

底线：将unitStepSize选项放入时间对象后，它按预期工作。