AmCharts图例/过滤器配置? [英] AmCharts Legend / Filter Configuration?

问题描述

我正在处理一个数据密集型IOT项目，并且我们正在使用许多不同的AmCharts将数据显示给用户.我刚刚实现了带有图例的折线图，并且效果很好.我正在显示大约20种不同的资产，它们是不同的颜色.AmCharts实现其图例的方式是，当您单击一种颜色时，该图将被禁用.

I'm working on a data intensive IOT project, and we are using many different AmCharts to display our data to the user. I just implemented a line chart with a legend and it's working very well. I have about 20 different assets being displayed, and they are different colors. The way AmCharts implements their legend is, when you click a color it is disabled.

我的问题是，这些问题能否轻易逆转?我希望如此，当您单击图例上的资产颜色时，图表上的所有其他颜色均被禁用，而您单击的是唯一显示的颜色.

非常感谢您的帮助.

推荐答案

您可以使用 showItem 和 hideItem 事件通过设置图表的 hidden 属性设置为false，并通过将 hidden 设置为true来隐藏其他图形:

You can use the showItem and hideItem events in the legend to force the clicked on marker to maintain its visibility by setting the graph's hidden property to false and hide the other graphs by setting hidden to 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();
}

下面的演示:

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();
}

AmCharts.makeChart("chartdiv", {
  "type": "serial",
  "categoryField": "category",
  "startDuration": 1,
  "categoryAxis": {
    "gridPosition": "start"
  },
  "trendLines": [],
  "graphs": [{
      "balloonText": "[[title]] of [[category]]:[[value]]",
      "bullet": "round",
      "id": "AmGraph-1",
      "title": "graph 1",
      "valueField": "column-1"
    },
    {
      "balloonText": "[[title]] of [[category]]:[[value]]",
      "bullet": "square",
      "id": "AmGraph-2",
      "title": "graph 2",
      "valueField": "column-2",
      "hidden": true
    }
  ],
  "guides": [],
  "valueAxes": [{
    "id": "ValueAxis-1",
    "stackType": "regular",
    "title": "Axis title"
  }],
  "allLabels": [],
  "balloon": {},
  "legend": {
    "enabled": true,
    "useGraphSettings": true,
    "listeners": [{
      "event": "showItem",
      "method": hideOthers
    }, {
      "event": "hideItem",
      "method": hideOthers
    }]
  },
  "titles": [{
    "id": "Title-1",
    "size": 15,
    "text": "Chart Title"
  }],
  "dataProvider": [{
      "category": "category 1",
      "column-1": 8,
      "column-2": 5
    },
    {
      "category": "category 2",
      "column-1": 6,
      "column-2": 7
    },
    {
      "category": "category 3",
      "column-1": 2,
      "column-2": 3
    },
    {
      "category": "category 4",
      "column-1": 1,
      "column-2": 3
    },
    {
      "category": "category 5",
      "column-1": 2,
      "column-2": 1
    },
    {
      "category": "category 6",
      "column-1": 3,
      "column-2": 2
    },
    {
      "category": "category 7",
      "column-1": 6,
      "column-2": 8
    }
  ]
});

<script type="text/javascript" src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="https://www.amcharts.com/lib/3/serial.js"></script>

<div id="chartdiv" style="width: 100%; height: 400px; background-color: #FFFFFF;"></div>

修改

为使单击同一标记可切换其他图表的可见性，您可以通过事件处理程序在图表实例本身中存储几个标志，并使用这些标志确定是否隐藏所有其他标志图表或将其全部显示:

To make it so that clicking on the same marker toggles the visibility of the other charts back on, you can store a couple of flags in the chart instance itself through the event handler and use those flags to determine whether to hide all other charts or make them all visible:

function hideOthers(e) {
  var currentGraph = e.dataItem;
  var hidden = true;
  //check if we clicked on this graph before and if all the other graphs are visible.
  // if we clicked on this graph before and the other graphs are invisible,
  // make them visible, otherwise default to previous behavior
  if (e.chart.lastClicked == currentGraph.id && e.chart.allVisible == false) {
      hidden = false;
      e.chart.allVisible = true;
  }
  else {
    e.chart.allVisible = false;
  }
  e.chart.lastClicked = currentGraph.id; //keep track of the current one we clicked

  currentGraph.hidden = false; //force clicked graph to stay visible
  e.chart.graphs.forEach(function(graph) {
    if (graph.id !== currentGraph.id) {
      graph.hidden = hidden;  //set the other graph's visibility based on the rules above
    }
  });
  // update the chart with newly set hidden values
  e.chart.validateNow();
}

AmCharts.makeChart("chartdiv", {
  // .. custom flags to make the above code work
  "lastClicked": null,
  "allVisible": true, //if you're only showing one graph by default, set this to false
  // ...
})

演示:

function hideOthers(e) {
  var currentGraph = e.dataItem;
  var hidden = true;
  //check if we clicked on this graph before and if all the other graphs are visible.
  // if we clicked on this graph before and the other graphs are invisible,
  // make them visible, otherwise default to previous behavior
  if (e.chart.lastClicked == currentGraph.id && e.chart.allVisible == false) {
      hidden = false;
      e.chart.allVisible = true;
  }
  else {
    e.chart.allVisible = false;
  }
  e.chart.lastClicked = currentGraph.id; //keep track of the current one we clicked
  
  currentGraph.hidden = false; //force clicked graph to stay visible
  e.chart.graphs.forEach(function(graph) {
    if (graph.id !== currentGraph.id) {
      graph.hidden = hidden;  //set the other graph's visibility based on the rules above
    }
  });
  // update the chart with newly set hidden values
  e.chart.validateData();
}

AmCharts.makeChart("chartdiv", {
  "type": "serial",
  "lastClicked": null,
  "allVisible": true, //if you're only showing one graph by default, set this to false
  "categoryField": "category",
  "startDuration": 1,
  "categoryAxis": {
    "gridPosition": "start"
  },
  "trendLines": [],
  "graphs": [{
      "balloonText": "[[title]] of [[category]]:[[value]]",
      "bullet": "round",
      "id": "AmGraph-1",
      "title": "graph 1",
      "valueField": "column-1"
    },
    {
      "balloonText": "[[title]] of [[category]]:[[value]]",
      "bullet": "square",
      "id": "AmGraph-2",
      "title": "graph 2",
      "valueField": "column-2"
    }
  ],
  "guides": [],
  "valueAxes": [{
    "id": "ValueAxis-1",
    //"includeHidden": true,
    "title": "Axis title"
  }],
  "allLabels": [],
  "balloon": {},
  "legend": {
    "enabled": true,
    "useGraphSettings": true,
    "listeners": [{
      "event": "showItem",
      "method": hideOthers
    }, {
      "event": "hideItem",
      "method": hideOthers
    }]
  },
  "titles": [{
    "id": "Title-1",
    "size": 15,
    "text": "Chart Title"
  }],
  "dataProvider": [{
      "category": "category 1",
      "column-1": 8,
      "column-2": 5
    },
    {
      "category": "category 2",
      "column-1": 6,
      "column-2": 7
    },
    {
      "category": "category 3",
      "column-1": 2,
      "column-2": 3
    },
    {
      "category": "category 4",
      "column-1": 1,
      "column-2": 3
    },
    {
      "category": "category 5",
      "column-1": 2,
      "column-2": 1
    },
    {
      "category": "category 6",
      "column-1": 3,
      "column-2": 2
    },
    {
      "category": "category 7",
      "column-1": 6,
      "column-2": 8
    }
  ]
});

<script type="text/javascript" src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="https://www.amcharts.com/lib/3/serial.js"></script>

<div id="chartdiv" style="width: 100%; height: 400px; background-color: #FFFFFF;"></div>

这篇关于AmCharts图例/过滤器配置?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！