javascript - canvas js 日期在 x 轴上重复

Question

我正在使用 canvasjs 以图表格式显示数据。除了日期之外，一切正常

当数据较少时重复。

这是我的 JS

var chartResponses = new CanvasJS.Chart("chartResponses", {
        animationEnabled: true,
        toolTip: {
            enabled: true,
            animationEnabled: true,
            fontColor: "#F9BF97",
        },
        axisX: {
            titleFontFamily: "verdana",
            valueFormatString: "D/M/YYYY",
            tickThickness: 0,
            lineThickness: 1,
            gridThickness: 0,
            gridColor: "#f2f6f7",
            lineColor: "#f2f6f7",
            labelFontColor: "#8fa2aa",
            labelFontSize: 12,
            intervalType: "day",

        },
        axisY: {
            titleFontFamily: "verdana",
            valueFormatString: "0",
            tickThickness: 0,
            lineThickness: 0,
            gridThickness: 1,
            gridColor: "#f2f6f7",
            lineColor: "#f2f6f7",
            labelFontColor: "#8fa2aa",
            labelFontSize: 12
        },
        data: [{
                type: "splineArea",
                showInLegend: true,
                markerSize: 0,
                name: "",
                color: "#F9BF97",
                dataPoints: allResponses
            }],
    });

    chartResponses.render();

当我只有两个日期时它如何显示图表

我尝试将间隔设置为间隔:1。在这种情况下，较少的数据图表工作正常，但当我有更多数据时，日期开始重叠，如下图所示。

但是当我删除 interval: 1 时，它显示得很好

那么有什么办法可以解决这个问题吗？

Answer 1

当您有更多数据时，您必须将间隔属性更改为 5 或更多，否则按周或月更改间隔类型属性。如这个更新的 fiddle 所示。 jsfiddle.net/hb5KU/66/

您可以在将来根据您的响应数据长度渲染图表之前添加它。