Highcharts系列-要显示/隐藏除所选系列以外的所有系列(默认逻辑反转)
默认情况下,Highcharts允许您单击数据系列集以隐藏/取消隐藏它 一种更有用的方法是执行反向逻辑,即仅显示选定的系列,隐藏/取消隐藏未选定的系列 看看这里的例子(),很明显可以“截获”legendItemClick事件,我只是不确定如何实现require逻辑 可以替换以下脚本以获得3个数据集 所需场景:能够点击“苹果”并显示/隐藏“梨”和“橙子” ===========================粘贴开始=======================================Highcharts系列-要显示/隐藏除所选系列以外的所有系列(默认逻辑反转),highcharts,Highcharts,默认情况下,Highcharts允许您单击数据系列集以隐藏/取消隐藏它 一种更有用的方法是执行反向逻辑,即仅显示选定的系列,隐藏/取消隐藏未选定的系列 看看这里的例子(),很明显可以“截获”legendItemClick事件,我只是不确定如何实现require逻辑 可以替换以下脚本以获得3个数据集 所需场景:能够点击“苹果”并显示/隐藏“梨”和“橙子” ===========================粘贴开始======================================= v
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
plotOptions: {
series: {
events: {
legendItemClick: function(event) {
var visibility = this.visible ? 'visible' : 'hidden';
if (!confirm('The series is currently '+
visibility +'. Do you want to change that?')) {
return false;
}
}
}
}
},
series:[{name: 'apples',
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]},
{name:'pears',
data: [19.9, 81.5, 96.4, 119.2, 124.0, 166.0, 155.6, 138.5, 116.4, 144.1, 95.6, 54.4]},
{name:'oranges',
data: [119.9, 181.5, 46.4, 219.2, 24.0, 66.0, 255.6, 238.5, 16.4, 44.1, 95.6, 54.4]}
]
});
HighCharts中的每个事件都包含包含当前元素(本例中为系列)的
值。您可以使用this.chart.series
选择所有系列,并以任何方式处理它们。试试这个功能
legendItemClick: function(event) {
if (!this.visible)
return false;
var seriesIndex = this.index;
var series = this.chart.series;
for (var i = 0; i < series.length; i++)
{
if (series[i].index != seriesIndex)
{
series[i].visible ?
series[i].hide() :
series[i].show();
}
}
return false;
}
legendItemClick:函数(事件){
如果(!this.visible)
返回false;
var seriesIndex=该指数;
var series=this.chart.series;
对于(变量i=0;i
小提琴:只是分享因为@igor的答案对我不起作用,所以我做了调整,这是小提琴(来自@igor的答案)
如果您希望保持正常功能,但也能够显示/隐藏全部,则为show_all()
/hide_all()
javascript方法创建一个按钮或链接
此方法初始化计数器并开始显示/隐藏:
counter = 0;
setTimeout(process_hide, 1);
function process_hide()
{
your_chart.series[counter].hide();
counter+=1;
if (counter < read_chart.series.length) {
setTimeout(process_hide, 1);
}
}
计数器=0;
设置超时(进程隐藏,1);
函数进程_hide()
{
您的_chart.series[计数器].hide();
计数器+=1;
if(计数器<读取图表系列长度){
设置超时(进程隐藏,1);
}
}
您这样做而不是只做$。每个(您的_图表,函数(i,v){v.hide()})
都是因为它锁定了UI-使用超时,您实际上会看到序列一个接一个地被隐藏-如果您想修改其他东西,比如进程表,它实际上会起作用。分叉索引的答案,并添加功能,为每个系列提供单独的切换
我想做类似的事情。。。我想让它这样,如果你控制点击(或命令点击)一个图例项目,它会隐藏所有其他项目。(但将正常单击保留为默认行为)
plotOptions:{
系列:{
活动:{
legendItemClick:函数(e){
//单击图例项时,我们希望隐藏所有其他项,而不是切换可见性。
var hideAllOthers=e.browservevent.metaKey;
if(隐藏者){
var seriesIndex=该指数;
var series=this.chart.series;
对于(变量i=0;i
分叉是因为我想改变行为。最初,当用户选择两个系列,然后试图取消选择一个。。。整个系列将互换可见性。在切换系列的可见性之前,我先检查所有其他系列是否为“所有其他可见”或“所有其他不可见”
我看你有没有如果(!this.visible)返回true;这似乎不起作用-我可以单击“隐藏”系列。修复-如果(!This.visible)返回FALSE;万分感谢-解决方案太棒了!!:)它可以工作,但是对于中等数量(n=20)的系列,速度非常慢。我修复了这个答案中提到的小提琴,在highcharts.js@philfreo的新位置,如果我们可以在开始时看到所有数据,并且能够切换,那就更好了。你不是在复制内置功能吗?非常有效,谢谢!我使用e.browserEvent.metaKey | | e.browserEvent.ctrlKey
来包含Windows用户支持,以包含@satyadeepk。即使对于大量系列,添加也能完美地工作。谢谢。这种行为是不是偶然的?这似乎应该是默认的-它有一个巨大的优势(系列的快速切换)和零缺点。
$.each(allSeries, function(index, series) {
if (selected == index) {
if (series.visible == true) {
series.hide();
}
else {
series.show();
}
}
});
plotOptions: {
series: {
events: {
legendItemClick: function(e) {
// Upon cmd-click of a legend item, rather than toggling visibility, we want to hide all other items.
var hideAllOthers = e.browserEvent.metaKey;
if (hideAllOthers) {
var seriesIndex = this.index;
var series = this.chart.series;
for (var i = 0; i < series.length; i++) {
// rather than calling 'show()' and 'hide()' on the series', we use setVisible and then
// call chart.redraw --- this is significantly faster since it involves fewer chart redraws
if (series[i].index === seriesIndex) {
if (!series[i].visible) series[i].setVisible(true, false);
} else {
if (series[i].visible) series[i].setVisible(false, false);
}
}
this.chart.redraw();
return false;
}
}
}
}
}
legendItemClick: function(e) {
var seriesIndex = this.index;
var series = this.chart.series;
// test for if all other series besides one selected are visible or not visible
var allElseVisible = series.every(
s => (s.index == seriesIndex ? true : s.visible),
);
var allElseNotVisible = series.every(
s => (s.index == seriesIndex ? true : !s.visible),
);
// if everything else is deselected or selected ... swap visibility
// else swap the visibility of selected object.
if (allElseVisible || allElseNotVisible) {
series.map(s => {
if (s.index != seriesIndex) {
s.visible ? s.hide() : s.show();
}
});
} else {
return true;
}
return false; // overrides default behavior
},