javascript - AmCharts 图例/过滤器配置？

Question

我正在开发一个数据密集型物联网项目，我们使用许多不同的 AmCharts 向用户显示我们的数据。我刚刚实现了一个带有图例的折线图，它运行得很好。我显示了大约 20 个不同的 Assets ，它们有不同的颜色。 AmCharts 实现图例的方式是，当您单击颜色时，它会被禁用。

我的问题是这些可以轻松逆转吗？我希望如此，当您单击图例上的 Assets 颜色时，图表上的所有其他颜色都会被禁用，并且您单击的颜色是唯一显示的。

感谢您提前提供的帮助。

Answer 1

您可以使用showItem和 hideItem图例中的事件通过设置图表的 hidden 强制单击的标记保持其可见性属性设置为 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();
}

演示如下:

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>

编辑

要使单击同一标记重新打开其他图表的可见性，您可以通过事件处理程序在图表实例本身中存储几个标志，并使用这些标志来确定是否隐藏所有其他图表图表或使它们全部可见:

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>