隐藏 ChartJS 折线图中的点
Hide points in ChartJS LineGraph
最初,我将每个点的填充颜色设置为完全透明。如果我将鼠标悬停在图表上,则会弹出点。我想隐藏所有点,以便折线图平滑。
您可以通过在配置选项中设置点的半径属性来实现此目的,如下所示:
var chartConfig = {
type: 'line',
options: {
elements: {
point:{
radius: 0
}
}
}
}
点的工具提示也将消失。
您可以将pointRadius
设置为零。
var myChart = new Chart(
ctx, {
type: 'line',
data: {
labels: [...]
datasets: [
{
data: [...],
pointRadius: 0, # <<< Here.
}
]
},
options: {}
})
我遇到了同样的问题,但我想保持悬停选项处于活动状态。有我的解决方案:
const config = {
type: 'line',
data: {
datasets:[{
label: 'Température',
borderColor: 'rgb(255, 99, 132)',
data: tempE,
pointStyle: 'rect',
}]
},
options: {
elements:{
point:{
borderWidth: 0,
radius: 10,
backgroundColor: 'rgba(0,0,0,0)'
}
}
}
};
实际上对
我有用的是删除点并在版本 4 中保留工具提示,将 pointStyle 属性设置为 false。是官方文档中提供的列表中的最后一个选项。
代码可能是这样的:
const chart = new Chart('canvas-id', {
type: 'line',
data: {
label: 'Some label',
data: [...],
pointStyle: false
}
});
相关文章:
- 用与线条相同的颜色填充多折线图上的点
- 跟踪jqplot垂直折线图的鼠标位置
- Morris.js折线图x轴标签在调整大小后消失
- Chart.js V2折线图缺点
- 将直流图表库中的折线图缩放限制为小时
- 如何用d3.js绘制折线图
- 部分填充区域的折线图
- 将时间缩放添加到折线图(Chart.js)
- Chart.js折线图的0线型
- d3绘制动画折线图的基本示例
- Javascript FLOT组合条形图;以x轴为字符串的折线图
- 如何在折线图中显示最近的值
- charts js更改折线图轴的字体大小/颜色和背景线
- 从特定系列的谷歌可视化折线图中删除悬停工具提示
- 隐藏 ChartJS 折线图中的点
- chartjs显示悬停在折线图上的点
- 有没有一种方法可以动态地将带有标签的多行插入ChartJS折线图中
- Chartjs示例折线图设置没有't显示数据标签
- 如何将数据从controller绑定到chartjs折线图,以创建动态折线图
- 如何在折线图的Chartjs中根据用户输入动态改变Y轴值