CanvasJS同日期双数据系列X轴位置错位问题求解

我用CanvasJS绘制图表，有两组包含相同日期的数据，但红色的第二个图表（Events）的X轴位置没有和第一个图表的日期对应，而是从左侧开始排列，怎么让它显示在正确的X轴位置上？

解决方案核心 #

不要用label字段定义日期，改用x字段传入Date对象，同时配置axisX的日期显示格式，让图表基于时间轴对齐数据点。

修改后的完整代码 #

var chart = new CanvasJS.Chart("chartContainer", {
    theme:"light2",
    zoomEnabled: true,
    animationEnabled: true,
    title:{text: "Production"},
    axisY:{title: "amount"},
    axisX:{
        labelFontSize: 10,
        valueFormatString: "YYYY/MM/DD" // 设置日期显示格式
    },
    toolTip: {shared: "true"},
    legend:{cursor:"pointer", itemclick : toggleDataSeries},
    data: [{
        type: "spline",
        showInLegend: true,
        axisYIndex: 0,
        name: "P1",
        dataPoints: [
            { x: new Date("2019/07/01"), y: 10 },
            { x: new Date("2019/07/02"), y: 12 },
            { x: new Date("2019/07/03"), y: 18 },
            { x: new Date("2019/07/04"), y: 5 },
            { x: new Date("2019/07/05"), y: 9 },
            { x: new Date("2019/07/06"), y: 12 },
            { x: new Date("2019/07/07"), y: 10 },
            { x: new Date("2019/07/08"), y: 10 },
            { x: new Date("2019/07/09"), y: 12 },
            { x: new Date("2019/07/10"), y: 7 },
            { x: new Date("2019/07/11"), y: 2 },
            { x: new Date("2019/07/12"), y: 3 },
            { x: new Date("2019/07/13"), y: 4 },
            { x: new Date("2019/07/14"), y: 5 },
            { x: new Date("2019/07/15"), y: 6 },
            { x: new Date("2019/07/16"), y: 0 },
            { x: new Date("2019/07/17"), y: 0 },
            { x: new Date("2019/07/18"), y: 0 },
            { x: new Date("2019/07/19"), y: 0 },
            { x: new Date("2019/07/20"), y: 0 },
            { x: new Date("2019/07/21"), y: 0 },
            { x: new Date("2019/07/22"), y: 0 },
            { x: new Date("2019/07/23"), y: 0 },
            { x: new Date("2019/07/24"), y: 0 },
            { x: new Date("2019/07/25"), y: 0 },
            { x: new Date("2019/07/26"), y: 0 },
            { x: new Date("2019/07/27"), y: 0 },
            { x: new Date("2019/07/28"), y: 11 },
            { x: new Date("2019/07/29"), y: 18 },
            { x: new Date("2019/07/30"), y: 21 },
            { x: new Date("2019/07/31"), y: 20 },
        ]
    }, {
        color: "red",
        type: "spline",
        showInLegend: true,
        name: "Events",
        dataPoints: [
            { x: new Date("2019/07/05"), y: 29 },
            { x: new Date("2019/07/10"), y: 29 },
            { x: new Date("2019/07/13"), y: 29 },
            { x: new Date("2019/07/18"), y: 29 },
            { x: new Date("2019/07/20"), y: 29 },
            { x: new Date("2019/07/23"), y: 29 }
        ]
    }]
});

chart.render();

function toggleDataSeries(e) {
    if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible ){
        e.dataSeries.visible = false;
    } else {
        e.dataSeries.visible = true;
    }
    chart.render();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.canvasjs.com/ga/canvasjs.min.js"></script>

<div id="chartContainer" style="height:300px; width: 100%;"></div>

原因说明 #

原来用label定义日期时，CanvasJS会把每个数据系列的点按顺序当作独立分类项，第二个系列的6个点会对应第一个系列的前6个分类位置（即2019/07/01到2019/07/06），而非按日期匹配。改用x字段传入Date对象后，图表会自动将X轴转换为时间轴，所有数据点基于时间坐标定位，相同日期的点自然对齐到同一X轴位置。

内容的提问来源于Stack Exchange，提问作者Ali Sheikhpour