AmCharts Legend / Filter Configuration?

问题

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.

My question is can these be reversed easily? I want it so, when you click a assets color on the legend all the others on the chart are disabled, and the one you clicked is the only one being displayed.

Thanks for the help in advance.

回答1:

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

Demo below:

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>

Edit

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
  // ...
})

Demo:

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>

来源：https://stackoverflow.com/questions/44504923/amcharts-legend-filter-configuration