Javascript 取消选中按钮单击时的图例
我已经用chart.js创建了一个图表，并且我为图例创建了onclick事件。我希望显示所有图例，而不显示删除线 常数累加器={ id:'累加器'， 更新前：图表=>{ 让总数={} 设极限=0 chart.data.datasets.forEachdataset，datasetIndex=>{ 如果chart.isDatasetVisibledatasetIndex{ 极限=数据集索引 dataset.data.forEachvalue，索引=>{ 总计[索引]=总计[索引]| | 0+值 } } } 图表。$累加器={ 总计：总计， 极限 } } } 新图表“Chart”{ 键入：“水平线”， 数据：{ 标签：['Brut'，'Net imposable'，'Net']， 数据集：[数据：[10,20,10]，标签：第一次演示\/会议，背景色：7B68EE}，{数据：[109,82,22]，标签：保持\/未分类，背景色：B0C4DE}，{数据：[4,14,1]，标签：SGL，背景色：F4A460}，{数据：[1,0,0]，标签：PGL，背景色：BC8F8F}，{数据：[1,8,1]，标签：正在评估的QO，背景色：2E8B57}，{38,37]，标签：后续会议，背景色：6495ED}，{数据：[9,6,0]，标签：MGL，背景色：FFA500}，{数据：[6,32,0]，标签：确定的机会，背景色：6B8E23}，{数据：[0,2,0]，标签：RGL，背景色：DEB887}，年度：[数据：[2]，标签：RGL，背景色：DEB887}，{数据：[40]，标签：第一次演示\/会议，背景色：7BEE}，{10]，标签：正在评估的QO，背景色：2E8B57}，{数据：[1]，标签：PGL，背景色：BC8F8F}，{数据：[38]，标签：确定的机会，背景色：6B8E23}，{数据：[19]，标签：SGL，背景色：F4A460}，{数据：[213]，标签：保留\/未分类，背景色：B0C4DE}，{数据：[15]，标签：MGL，背景色：FFA500}，{数据：[91][数据：[0,1,1,0 0,0,0,0,0,0,0,0,2,14,7,0 0,0,1,1,2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0 0 0,0 0 0 0,0 0 0 0 0 0 0 0,0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0，0，0 0 0 0 0 0 0 0，0 0，0 0 0 0，0 0 0，0 0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0[149,2,3 3 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0，0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0，0 0 0 0 0 0 0 0，0 0 0 0 0，0 0 0 0 0，0 0 0 0 0 0 0，0 0 0 0 0 0，0 0，0 0 0 0，0 0，0 0 0，0，0，0，0 0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0 0，0，0 0 0,0,0,0,0,1,0,0,0,0,1,0,0,0,0,0,0,0]，标签：正在评估的QO，背景色：2E8B57}，{数据：标签：后续会议，背景色：背景色：64950...背景色.标签：标签：跟踪会议，背景色：6495ED....背景色........背景色........背景色：6495........数据.数据.数据：：[0，3，3，0，0，0，0，0，0，0，0，0，0，0，0 0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]，标签：PGL，背景色：BC8F8F}，{数据：[0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0]，标签：RGL，背景色：DEB887}]，过滤器：{每周：[第1周，第2周，第3周，第4周] }, 选项：{ 比例：{ xAxes：[{ 是的 }], 雅克斯：[{ 是的 }] }, 图例：{ onClick:function，legendItem{ var指数=legendItem.datasetIndex； var ci=这张图表； var alreadyHidden=ci.getDatasetMetaindex.hidden==null？false:ci.getDatasetMetaindex.hidden； var anyothersalerreadyhidden=false； var=true； //找出标签的当前状态 ci.data.datasets.foreachFunction，i{ var meta=ci.getDatasetMetai； 如果我！==索引{ 如果meta.hidden{ 任何其他条件均为true； }否则{ 隐藏=假； } } }; //如果我们单击的标签已隐藏 //然后，我们现在要与任何其他已取消隐藏的对象一起取消隐藏 如果已经隐藏{ ci.getDatasetMetaindex.hidden=null； }否则{ //否则，让我们了解如何根据当前状态切换可见性 ci.data.datasets.foreachFunction，i{ var meta=ci.getDatasetMetai； 如果我！==索引{ //在单击可见隐藏标签时处理逻辑，当前至少有 //另一个可见的标签和至少一个已隐藏的标签 //我们想让那些已经隐藏的东西继续隐藏 如果其他任何人已经隐藏&&！AllotherHidden{ meta.hidden=true； }否则{ //切换可见性 meta.hidden=meta.hidden==null？！meta.hidden:null； } }否则{ meta.hidden=null； } }; } 更新； }, 显示：对， 销售时点情报系统 对， 标签：{ 过滤器：功能项，图表{ //删除特定图例项的逻辑如下所示 return！item.text.包括'Total'； }, 颜色：黑色， 箱宽：12， 方特家族：雷威中等 } }, 插件：{ 数据标签：{ 格式化程序：值，ctx=>{ const total=ctx.chart.$totalizer.totals[ctx.dataIndex] 返回总计。toLocaleString'fr-fr'{ 风格：“货币”， 货币：欧元 } }, 对齐：“结束”， 主持人:"结束",， 显示：functionctx{ 返回ctx.datasetIndex==ctx.chart.$totalizer.max } } } }, 插件：[累加器] }; $'.reset'。单击函数{ //chart.ctx.legend.reset； }; 重置Javascript 取消选中按钮单击时的图例,javascript,html,jquery,Javascript,Html,Jquery,我已经用chart.js创建了一个图表，并且我为图例创建了onclick事件。我希望显示所有图例，而不显示删除线 常数累加器={ id:'累加器'， 更新前：图表=>{ 让总数={} 设极限=0 chart.data.datasets.forEachdataset，datasetIndex=>{ 如果chart.isDatasetVisibledatasetIndex{ 极限=数据集索引 dataset.data.forEachvalue，索引=>{ 总计[索引]=总计[索引]| | 0+值
这是带有图例工作复位按钮的版本 常数累加器={ id:'累加器'， 更新前：图表=>{ 让总数={} 设极限=0 chart.data.datasets.forEachdataset，datasetIndex=>{ 如果chart.isDatasetVisibledatasetIndex{ 极限=数据集索引 dataset.data.forEachvalue，索引=>{ 总计[索引]=总计[索引]| | 0+值 } } } 图表。$累加器={ 总计：总计， 极限 } } } 常量图表=新图表“图表”{ 键入：“水平线”， 数据：{ 标签：['Brut'，'Net imposable'，'Net']， 数据集：[数据：[10,20,10]，标签：第一次演示\/会议，背景色：7B68EE}，{数据：[109,82,22]，标签：保持\/未分类，背景色：B0C4DE}，{数据：[4,14,1]，标签：SGL，背景色：F4A460}，{数据：[1,0,0]，标签：PGL，背景色：BC8F8F}，{数据：[1,8,1]，标签：正在评估的QO，背景色：2E8B57}，{38,37]，标签：后续会议，背景色：6495ED}，{数据：[9,6,0]，标签：MGL，背景色：FFA500}，{数据：[6,32,0]，标签：确定的机会，背景色：6B8E23}，{数据：[0,2,0]，标签：RGL，背景色：DEB887}，年度：[数据：[2]，标签：RGL，背景色：DEB887}，{数据：[40]，标签：第一次演示\/会议，背景色：7BEE}，{10]，标签：正在评估的QO，背景色：2E8B57}，{数据：[1]，标签：PGL，背景色：BC8F8F}，{数据：[38]，标签：确定的机会，背景色：6B8E23}，{数据：[19]，标签：SGL，背景色：F4A460}，{数据：[213]，标签：保留\/未分类，背景色：B0C4DE}，{数据：[15]，标签：MGL，背景色：FFA500}，{数据：[91][数据：[0,1,1,0 0,0,0,0,0,0,0,0,2,14,7,0 0,0,1,1,2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0 0 0,0 0 0 0,0 0 0 0 0 0 0 0,0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0，0，0 0 0 0 0 0 0 0，0 0，0 0 0 0，0 0 0，0 0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0[149,2,3 3 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0，0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0，0 0 0 0 0 0 0 0，0 0 0 0 0，0 0 0 0 0，0 0 0 0 0 0 0，0 0 0 0 0 0，0 0，0 0 0 0，0 0，0 0 0，0，0，0，0 0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0 0，0，0 0 0,0,0,0,0,1,0,0,0,0,1,0,0,0,0,0,0,0]，标签：正在评估的QO，背景色：2E8B57}，{数据：标签：后续会议，背景色：背景色：64950...背景色.标签：标签：跟踪会议，背景色：6495ED....背景色........背景色........背景色：6495........数据.数据.数据：：[0，3，3，0，0，0，0，0，0，0，0，0，0，0，0 0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]，标签：PGL，背景色：BC8F8F}，{数据：[0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0]，标签：RGL，背景色：DEB887}]，过滤器：{每周：[第1周，第2周，第3周，第4周] }, 选项：{ 比例：{ xAxes：[{ 是的 }], 雅克斯：[{ 是的 }] }, 图例：{ onClick:function，legendItem{ var指数=legendItem.datasetIndex； var ci=这张图表； var alreadyHidden=ci.getDatasetMetaindex.hidden==null？false:ci.getDatasetMetaindex.hidden； var anyothersalerreadyhidden=false； var=true； //找出标签的当前状态 ci.data.datasets.foreachFunction，i{ var meta=ci.getDatasetMetai； 如果我！==索引{ 如果meta.hidden{ 任何其他条件均为true； }否则{ 隐藏=假； } } }; //如果我们单击的标签已隐藏 //然后，我们现在要与任何其他已取消隐藏的对象一起取消隐藏 如果已经隐藏{ ci.getDatasetMetaindex.hidden=null； }否则{ //否则，让我们了解如何根据当前状态切换可见性 ci.data.datasets.foreachFunction，i{ var meta=ci.getDatasetMetai； 如果 我！==索引{ //在单击可见隐藏标签时处理逻辑，当前至少有 //另一个可见的标签和至少一个已隐藏的标签 //我们想让那些已经隐藏的东西继续隐藏 如果其他任何人已经隐藏&&！AllotherHidden{ meta.hidden=true； }否则{ //切换可见性 meta.hidden=meta.hidden==null？！meta.hidden:null； } }否则{ meta.hidden=null； } }; } 更新； }, 显示：对， 位置:对,， 标签：{ 过滤器：功能项，图表{ //删除特定图例项的逻辑如下所示 return！item.text.包括'Total'； }, 颜色：黑色， 箱宽：12， 方特家族：雷威中等 } }, 插件：{ 数据标签：{ 格式化程序：值，ctx=>{ const total=ctx.chart.$totalizer.totals[ctx.dataIndex] 返回总计。toLocaleString'fr-fr'{ 风格：“货币”， 货币：欧元 } }, 对齐：“结束”， 主持人:"结束",， 显示：functionctx{ 返回ctx.datasetIndex==ctx.chart.$totalizer.max } } } }, 插件：[累加器] }; $'.reset'。单击函数{ chart.data.datasets.foreach，i=>{ chart.getDatasetMetai.hidden=null； }; 图表.更新； }; 重置
这是带有图例工作复位按钮的版本 常数累加器={ id:'累加器'， 更新前：图表=>{ 让总数={} 设极限=0 chart.data.datasets.forEachdataset，datasetIndex=>{ 如果chart.isDatasetVisibledatasetIndex{ 极限=数据集索引 dataset.data.forEachvalue，索引=>{ 总计[索引]=总计[索引]| | 0+值 } } } 图表。$累加器={ 总计：总计， 极限 } } } 常量图表=新图表“图表”{ 键入：“水平线”， 数据：{ 标签：['Brut'，'Net imposable'，'Net']， 数据集：[数据：[10,20,10]，标签：第一次演示\/会议，背景色：7B68EE}，{数据：[109,82,22]，标签：保持\/未分类，背景色：B0C4DE}，{数据：[4,14,1]，标签：SGL，背景色：F4A460}，{数据：[1,0,0]，标签：PGL，背景色：BC8F8F}，{数据：[1,8,1]，标签：正在评估的QO，背景色：2E8B57}，{38,37]，标签：后续会议，背景色：6495ED}，{数据：[9,6,0]，标签：MGL，背景色：FFA500}，{数据：[6,32,0]，标签：确定的机会，背景色：6B8E23}，{数据：[0,2,0]，标签：RGL，背景色：DEB887}，年度：[数据：[2]，标签：RGL，背景色：DEB887}，{数据：[40]，标签：第一次演示\/会议，背景色：7BEE}，{10]，标签：正在评估的QO，背景色：2E8B57}，{数据：[1]，标签：PGL，背景色：BC8F8F}，{数据：[38]，标签：确定的机会，背景色：6B8E23}，{数据：[19]，标签：SGL，背景色：F4A460}，{数据：[213]，标签：保留\/未分类，背景色：B0C4DE}，{数据：[15]，标签：MGL，背景色：FFA500}，{数据：[91][数据：[0,1,1,0 0,0,0,0,0,0,0,0,2,14,7,0 0,0,1,1,2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0 0 0,0 0 0 0,0 0 0 0 0 0 0 0,0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0，0，0 0 0 0 0 0 0 0，0 0，0 0 0 0，0 0 0，0 0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0[149,2,3 3 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0，0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0，0 0 0 0 0 0 0 0，0 0 0 0 0，0 0 0 0 0，0 0 0 0 0 0 0，0 0 0 0 0 0，0 0，0 0 0 0，0 0，0 0 0，0，0，0，0 0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0 0，0，0 0 0,0,0,0,0,1,0,0,0,0,1,0,0,0,0,0,0,0]，标签：正在评估的QO，背景色：2E8B57}，{数据：标签：后续会议，背景色：背景色：64950...背景色.标签：标签：跟踪会议，背景色：6495ED....背景色........背景色........背景色：6495........数据.数据.数据：：[0，3，3，0，0，0，0，0，0，0，0，0，0，0，0 0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]，标签：PGL，背景色：BC8F8F}，{数据：[0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0]，标签：RGL，背景色：DEB887}]，过滤器：{每周：[第1周，第2周，第3周，第4周] }, 选项：{ 比例：{ xAxes：[{ 是的 }], 雅克斯：[{ 是的 }] }, 图例：{ onClick:function，legendItem{ var指数=legendItem.datasetIndex； var ci=这张图表； var alreadyHidden=ci.getDatasetMetaindex.hidden==null？false:ci.getDatasetMetaindex.hidden； var anyothersalerreadyhidden=false； var=true； //计算出当前的状态 标签 ci.data.datasets.foreachFunction，i{ var meta=ci.getDatasetMetai； 如果我！==索引{ 如果meta.hidden{ 任何其他条件均为true； }否则{ 隐藏=假； } } }; //如果我们单击的标签已隐藏 //然后，我们现在要与任何其他已取消隐藏的对象一起取消隐藏 如果已经隐藏{ ci.getDatasetMetaindex.hidden=null； }否则{ //否则，让我们了解如何根据当前状态切换可见性 ci.data.datasets.foreachFunction，i{ var meta=ci.getDatasetMetai； 如果我！==索引{ //在单击可见隐藏标签时处理逻辑，当前至少有 //另一个可见的标签和至少一个已隐藏的标签 //我们想让那些已经隐藏的东西继续隐藏 如果其他任何人已经隐藏&&！AllotherHidden{ meta.hidden=true； }否则{ //切换可见性 meta.hidden=meta.hidden==null？！meta.hidden:null； } }否则{ meta.hidden=null； } }; } 更新； }, 显示：对， 位置:对,， 标签：{ 过滤器：功能项，图表{ //删除特定图例项的逻辑如下所示 return！item.text.包括'Total'； }, 颜色：黑色， 箱宽：12， 方特家族：雷威中等 } }, 插件：{ 数据标签：{ 格式化程序：值，ctx=>{ const total=ctx.chart.$totalizer.totals[ctx.dataIndex] 返回总计。toLocaleString'fr-fr'{ 风格：“货币”， 货币：欧元 } }, 对齐：“结束”， 主持人:"结束",， 显示：functionctx{ 返回ctx.datasetIndex==ctx.chart.$totalizer.max } } } }, 插件：[累加器] }; $'.reset'。单击函数{ chart.data.datasets.foreach，i=>{ chart.getDatasetMetai.hidden=null； }; 图表.更新； }; 重置
我喜欢@Taha的解决方案！你甚至可以把它缩短到
$('.reset').click(function(){
chart.data.datasets.forEach(e=>e._meta[0].hidden = null);
chart.update();
});
我喜欢@Taha的解决方案！你甚至可以把它缩短到
$('.reset').click(function(){
chart.data.datasets.forEach(e=>e._meta[0].hidden = null);
chart.update();
});
我对你想要什么有点困惑。你是想添加一个“全部取消选择”按钮？还是想让功能与现在一样，只是不显示删除？还是其他？我对你想要什么有点困惑。你是想添加一个“全部取消选择”按钮？还是想让功能与现在一样，只是不显示删除？或其他？一般来说，访问或修改以下划线开头的字段不是一个好的做法。是的，我明白了。我想它们应该是私有的，并且不保证在未来的版本中保持不变。重点是！因此，我的贡献应该更像是一个黑客而不是一个解决方案访问或修改以下划线开头的字段不是一个好的做法。是的，我明白了。我想它们应该是私有的，并且不保证在未来的版本中保持不变。明白了！所以，我的贡献应该更像是一个黑客而不是一个解决方案-