AmCharts Legend / Filter Configuration?

时间：2017-06-12 17:00:34

标签： javascript sass visualization 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.

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 个答案:

答案 0 :(得分：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>

相关问题
最新问题