画布 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();

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

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

但是当我删除 interval: 1 时它显示正常

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

Answer 1

当您有更多数据时，您必须将 interval 属性更改为 5 或更多，或者按周或月更改 intervalType 属性。如这个更新的小提琴所示。 jsfiddle.net/hb5KU/66/

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