Charts 如何仅显示在Chartjs中发生更改的数据点？

仅显示发生更改的数据点

为了减少混乱，我不想在上一个值或下一个值相同时显示圆圈。当您将鼠标悬停在标签上以显示包含信息的标签时，仍然是这样

这就是我希望它看起来的样子：

第二个和第三个圆圈相同，它们必须隐藏并且仅在悬停时显示：

---

您可以使用以下选项设置点的样式

pointBackgroundColor

，

pointBorderColor

，

pointBorderWidth

但不是提供单一的价值

pointBackgroundColor: '#ffffff',
pointBorderColor: 'rgb(102, 187, 106)',
pointBorderWidth: 2,

您需要提供一个数组，其中包含数据集中每个点的值，
然后您可以更改相关点的值

对于不想显示的点，请使用颜色，例如

“透明”

这将隐藏该点，但悬停时仍显示工具提示

pointBackgroundColor: ['#ffffff', '#ffffff', 'transparent', 'transparent', '#ffffff', '#ffffff'],
pointBorderColor: ['rgb(102, 187, 106)', 'rgb(102, 187, 106)', 'transparent', 'transparent', 'rgb(102, 187, 106)', 'rgb(102, 187, 106)'],
pointBorderWidth: [2, 2, 0, 0, 2, 2]

请参阅以下工作片段

新图表（document.getElementById（'myChart'）.getContext（'2d'）{
键入：“行”，
数据：{
标签：[0,1,2,3,4,5,6,7,8,9]，
数据集：[{
背景颜色：“rgba（102187106,0.2）”，
边框颜色：“rgb（102187106）”，
边界宽度：2，
数据：[5,6,6,6,6,7,6,6,5,4]，
标签：“y”，
线张力：0，
pointBackgroundColor:[“#ffffff'、”#ffffff'、“#ffffff'、“#ffffff'、”#ffffff'、“#ffffff'、“#ffffff'、”、“#ffffff'、“#ffffff'、”，
pointBorderColor:['rgb（102187106）''rgb（102187106）''透明'，'rgb（102187106）'，'rgb（102187106）'，'rgb（102187106）'，'rgb（102187106）'，'rgb（102187106）'，'rgb（102187106）'，
pointBorderWidth:[2,2,0,0,2,2,2,2,2]
}]
}
});
一种稍微不同的方法（忍者！），通过
迭代该系列。forEach
构建颜色选项：


编辑：对
if
进行微调，以说明决定点可见性时的上一个值和下一个值，并添加悬停颜色设置以显示悬停时的隐藏点


let labels=['a'，'b'，'c'，'d'，'e'，'f'，'g'，'h'，'i'，'j']，
系列=[10,5,5,5,2,3,3,3,10]，
pointBackgroundColor=[]，
pointBorderColor=[]，
pointHoverBackgroundColor='白色'，
pointHoverBorderColor='红色'；
系列。forEach(
（值、索引）=>{
如果（值==系列[索引-1]&&值==系列[索引+1]）{
pointBackgroundColor.push（'transparent'）；
pointBorderColor.push（'transparent'）；
}否则{
pointBackgroundColor.push（'white'）；
pointBorderColor.push（'red'）；
}
});
myChart=新图表（document.getElementById（'Chart'）{
键入：“行”，
数据：{
标签：标签，
数据集：[{
标签：“系列1”，
数据：系列，
pointBackgroundColor:pointBackgroundColor，
pointBorderColor:pointBorderColor，
pointHoverBackgroundColor:pointHoverBackgroundColor，
pointHoverBorderColor:pointHoverBorderColor
}]
},
选项：{
MaintaintAspectRatio:false，
工具提示：{
模式：“索引”，
交集：错
},
悬停：{
交集：错
}
}
});
WhiteHat解决方案很好，但没有达到预期效果。将鼠标悬停在隐藏的数据点圆上时，应使该圆可见

我是这样做的

步骤1：

在使用PHP的后端，我检查上一个点和下一个点是否不同，并将点半径设为0

$countPoints = count($points);
for ($i=1; $i < $countPoints-1; $i++) { 
    $prevVal = $chartChange[$i-1];
    $nextVal = $chartChange[$i+1];
    if($chartChange[$i] == $prevVal && $chartChange[$i] == $nextVal){
        $points[$i] = 0;
    }
}

编辑：

仅使用js



让标签=['a'，'b'，'c'，'d'，'e'，'f'，'g'，'h'，'i'，'j']，
系列=[10,5,5,5,2,3,3,3,10]，
点半径=[]，
pointBackgroundColor=“rgb（230、247、238）”，
pointBorderColor=“rgb（47186117）”；
系列。forEach(
（值、索引）=>{
如果（值==系列[索引-1]&&值==系列[索引+1]）{
点半径推（0）；
}否则{
点半径推（4）；
}
});
myChart=新图表（document.getElementById（'myChart'）{
键入：“行”，
数据：{
标签：标签，
数据集：[{
标签：“系列1”，
填写：'开始'，
点半径：点半径，
数据：系列，
backgroundColor:pointBackgroundColor，
borderColor:pointBorderColor，
点半径：4，
pointBackgroundColor:pointBackgroundColor，
pointBorderColor:pointBorderColor，
}]
},
选项：{
工具提示：{
//模式：“索引”，
交集：错
},
工具提示：{
模式：“索引”，
轴：“x”，
交集：错
},
悬停：{
交集：错
},
MaintaintAspectRatio:false
}
});

那么您希望数据包含在图表中，从而显示它的线条，但要隐藏点标记吗？然后仍然在悬停时显示？是的，我希望包括数据和悬停时显示的点。这种方法很有趣，但没有达到预期效果。当数据点不同于数据点时，应显示圆圈。例如，
e
应该有一个数据点圆。你知道如何使用
工具提示：{mode:'index'，intersect:false}
它没有达到预期效果，但它给了我一个有效的想法。谢谢但这不起作用，例如：“点形状的半径。如果设置为0，则不会渲染点。”因此，即使在悬停时，它也不会显示。请参阅我的更新答案-不需要在PHP中执行此操作。只要在我的答案中更新
if
逻辑以检查下一个值，也会得到相同的结果。@timclutton悬停时，点显示。。。但这可能是一个错误。最后一次编辑是最好的解决方案。
pointRadius: [{/literal}{$points}{literal}]