Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/452.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript AmCharts图例/过滤器配置?_Javascript_Sass_Visualization_Amcharts - Fatal编程技术网

Javascript AmCharts图例/过滤器配置?

Javascript AmCharts图例/过滤器配置?,javascript,sass,visualization,amcharts,Javascript,Sass,Visualization,Amcharts,我正在从事一个数据密集型物联网项目,我们正在使用许多不同的AmCharts向用户显示我们的数据。我刚刚实现了一个带有图例的折线图,它运行得非常好。我有大约20个不同的资产正在显示,他们是不同的颜色。AmCharts实现其图例的方式是,当您单击颜色时,它将被禁用 我的问题是,这些可以很容易地逆转吗?我希望如此,当您单击图例上的资源颜色时,图表上的所有其他颜色都将被禁用,并且您单击的颜色是唯一显示的颜色。 提前感谢您的帮助。您可以使用图例中的和事件强制单击的标记保持其可见性,方法是将图形的属性设置为

我正在从事一个数据密集型物联网项目,我们正在使用许多不同的AmCharts向用户显示我们的数据。我刚刚实现了一个带有图例的折线图,它运行得非常好。我有大约20个不同的资产正在显示,他们是不同的颜色。AmCharts实现其图例的方式是,当您单击颜色时,它将被禁用

我的问题是,这些可以很容易地逆转吗?我希望如此,当您单击图例上的资源颜色时,图表上的所有其他颜色都将被禁用,并且您单击的颜色是唯一显示的颜色。

提前感谢您的帮助。

您可以使用图例中的和事件强制单击的标记保持其可见性,方法是将图形的属性设置为false,并通过将
hidden
设置为true隐藏其他图形:

// in makeChart:
  "legend": {
    "enabled": true,
    // ...
    "listeners": [{
      "event": "showItem",
      "method": hideOthers
    }, {
      "event": "hideItem",
      "method": hideOthers
    }]
  },
// ...

function hideOthers(e) {
  var currentGraph = e.dataItem;
  currentGraph.hidden = false; //force clicked graph to stay visible
  e.chart.graphs.forEach(function(graph) {
    if (graph.id !== currentGraph.id) {
      graph.hidden = true;  //hide the others
    }
  });
  // update the chart with newly set hidden values
  e.chart.validateNow();
}
演示如下:
函数隐藏者(e){
var currentGraph=e.dataItem;
currentGraph.hidden=false;//强制单击图形以保持可见
e、 图表。图形。forEach(函数(图形){
if(graph.id!==currentGraph.id){
graph.hidden=true;//隐藏其他
}
});
//使用新设置的隐藏值更新图表
e、 chart.validateNow();
}
AmCharts.makeChart(“chartdiv”{
“类型”:“串行”,
“类别字段”:“类别”,
“起始持续时间”:1,
“分类法”:{
“网格位置”:“开始”
},
“趋势线”:[],
“图表”:[{
“文本”:“[[类别]]:[[价值]]中的[[标题]]”,
“子弹”:“圆形”,
“id”:“AmGraph-1”,
“标题”:“图1”,
“valueField”:“第1列”
},
{
“文本”:“[[类别]]:[[价值]]中的[[标题]]”,
“子弹”:“方形”,
“id”:“AmGraph-2”,
“标题”:“图2”,
“valueField”:“第2列”,
“隐藏”:真实
}
],
“指南”:[],
“价值轴”:[{
“id”:“ValueAxis-1”,
“stackType”:“常规”,
“标题”:“轴标题”
}],
“所有标签”:[],
“气球”:{},
“传奇”:{
“启用”:正确,
“useGraphSettings”:正确,
“听众”:[{
“事件”:“showItem”,
“方法”:隐藏者
}, {
“事件”:“隐藏事件”,
“方法”:隐藏者
}]
},
“头衔”:[{
“id”:“标题1”,
“尺寸”:15,
“文本”:“图表标题”
}],
“数据提供者”:[{
“类别”:“类别1”,
“第1栏”:8,
“第2栏”:5
},
{
“类别”:“类别2”,
“第1栏”:6,
“第2栏”:7
},
{
“类别”:“类别3”,
“第1栏”:2,
“第2栏”:3
},
{
“类别”:“类别4”,
“第1栏”:1,
“第2栏”:3
},
{
“类别”:“类别5”,
“第1栏”:2,
“第2栏”:1
},
{
“类别”:“第6类”,
“第1栏”:3,
“第2栏”:2
},
{
“类别”:“类别7”,
“第1栏”:6,
“第2栏”:8
}
]
});


检查代码是否工作正常。最后一个问题。在用户单击图例上的某个项目,然后所有其他项目都被禁用后,如果用户再次单击该活动项目,那么最简单的方法是什么?所有其他项目将再次可见?我是否应该创建另一个类似上面的功能,但功能相反?我更新了答案。您可以设置一些自定义标志来检查上次单击的图形以及其他图形是否可见,以确定是否要显示或隐藏其他图形。老兄,您太棒了,我非常感谢您的帮助。我的项目经理刚刚告诉我,我们的团队有一个付费的AmCharts帐户来帮助我,有趣的是,我甚至不需要使用它。再次感谢!!!!不客气。AmCharts也监控StackOverflow(我正好为他们工作),所以无论是在我们的支持论坛、这里、电子邮件甚至Facebook页面上,我们都很乐意提供帮助。这太棒了!您发布的代码非常完美,我可以使用它为我的项目获得一个工作版本。我遇到的唯一问题是,当我单击其中一个图例项时,其他项消失,图表正在调整大小,当我重新启用其他项时,图表被切断。如果你看你的演示,它也发生在那里。这是一个bug,还是一个可以配置的设置?