javascript - 在 amcharts 中单击时突出显示单个条形

Question

我有一个来自 amcharts 的条形图。我需要在点击栏上突出显示单个栏。当前的情况是当我单击多个栏时，所有栏都会突出显示。

这是我的代码

      "listeners": [{
           "event": "clickGraphItem",
           "method": function(event) {
               var node = event.item.columnGraphics.node.lastChild;
               node.setAttribute("stroke","#8198b4");
               node.setAttribute("fill","#8198b4");
     }
     }]

有什么帮助吗？谢谢。

Answer 1

不要修改节点，而是使用 fillColorsField，它允许您设置/取消设置当前选定列的突出显示，并允许您浏览图表的其余数据以确保只有一项已选择。

  "graphs": [{
     // ...
     "fillColorsField": "selected"
  }],
  "zoomOutOnDataUpdate": false, //recommended so that the chart doesn't reset the current zoom after clicking on a column
  "listeners": [{
    "event": "clickGraphItem",
    "method": function(e) {
      //if the current item is already selected, deselect it
      if (e.item.dataContext.selected) {
        e.item.dataContext.selected = undefined;
      }
      else {
        //otherwise, find any other columns that were selected and deselect them 
        for (var i = 0; i < e.chart.dataProvider.length; ++i) {
          if (e.chart.dataProvider[i].selected) {  
            e.chart.dataProvider[i].selected = undefined;
            break;
          }
        }
        e.item.dataContext.selected = "#8198b4";
      }
      e.chart.validateData(); //update chart
    } 
  }]

下面的演示:

var chart = AmCharts.makeChart("chartdiv", {
  "type": "serial",
  "dataProvider": [{
    "country": "USA",
    "visits": 2025
  }, {
    "country": "China",
    "visits": 1882
  }, {
    "country": "Japan",
    "visits": 1809
  }, {
    "country": "Germany",
    "visits": 1322
  }, {
    "country": "UK",
    "visits": 1122
  }, {
    "country": "France",
    "visits": 1114
  }, {
    "country": "India",
    "visits": 984
  }, {
    "country": "Spain",
    "visits": 711
  }, {
    "country": "Netherlands",
    "visits": 665
  }, {
    "country": "Russia",
    "visits": 580
  }, {
    "country": "South Korea",
    "visits": 443
  }, {
    "country": "Canada",
    "visits": 441
  }, {
    "country": "Brazil",
    "visits": 395
  }],
  "graphs": [{
    "fillAlphas": 0.9,
    "lineAlpha": 0.2,
    "type": "column",
    "valueField": "visits",
    "fillColorsField": "selected"
  }],
  "categoryField": "country",
  "zoomOutOnDataUpdate": false, //recommended so that the chart doesn't reset the current zoom after clicking on a column
  "listeners": [{
    "event": "clickGraphItem",
    "method": function(e) {
      //if the current item is already selected, deselect it
      if (e.item.dataContext.selected) {
        e.item.dataContext.selected = undefined;
      }
      else {
        //otherwise, find any other columns that were selected and deselect them 
        for (var i = 0; i < e.chart.dataProvider.length; ++i) {
          if (e.chart.dataProvider[i].selected) {  
            e.chart.dataProvider[i].selected = undefined;
            break;
          }
        }
        e.item.dataContext.selected = "#8198b4";
      }
      e.chart.validateData(); //update chart
    } 
  }]
});

html, body {
  width: 100%;
  height: 100%;
  margin: 0px;
}

#chartdiv {
	width: 100%;
	height: 100%;
}

<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/serial.js"></script>

<div id="chartdiv"></div>