canvas js:如何动态删除数据点，但不创建“;“洞”;在图表中

canvas js: how to remove a datapoint dynamically but without creating a "hole" in chart?

本文关键字：创建 何动态 js 数据 删除 动态 canvas      更新时间：2023-09-26

在玩了几个小时的canvasJS之后，我找不到一种以优雅的方式从图表中动态删除点的方法。我想做的是允许用户选择/取消选择他想看到绘制的数据。例如，在显示2014年1月至2014年12月数据的图表上（X轴），如果用户选择不显示2014年2月，我会遍历dataPoints，删除这样的点并调用render（）。数据对应于二月的列随后消失，但在X轴上，二月的标签仍然显示，从而创建了一个"洞"。如果取消选择"第一个"或"最后一个"项目，则结果为"确定"，不显示该月份。我试过对x使用Date（），对x使用Integers，并将Date格式化为标签，但都不适用。所以，在开始寻找另一个解决方案之前，我想知道你们是否能帮我弄清楚我做错了什么。顺致敬意，

我已经完成了这个问题并创建了一个示例。这是JSFiddle

以下是我使用的逻辑：

for(var i=0; i<dataPoints.length ; i++){
        var dp = dataPoints[i];
        var dataPointMonth = (new Date(dp.label).getMonth());
        if( dataPointMonth !== monthToHide){
            dp.x = index++;
            newDataPoints.push(dp);
        }
}

在这种情况下，您可以使用标签而不是x值，并使用formatDate方法根据需要格式化日期值，然后使用labelFormatter进行进一步的自定义。

labelFormatter : function ( e ) {
            return CanvasJS.formatDate( e.label, "MMM");  
}
相关文章：