可以通过图例隐藏带有 Amcharts 的列吗？

Question

我目前正在制作一个图表来显示我拥有的一些数据，我设置了一个图例，可以 show/not 在图表中显示某些值。但是，我想知道是否可以将相同的方法应用于图表的列。使用下面的代码 ;

<html>
<body>
<!-- Styles -->
<style>
#chartdiv {
    width       : 100%;
    height      : 500px;
    font-size   : 11px;
}                       
</style>
<!-- Resources -->
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<!-- Chart code -->
<script>
var chart = AmCharts.makeChart("chartdiv", {
    "type": "serial",
     "theme": "light",
    "categoryField": "year",
    "rotate": false,
    "legend": {
        "useGraphSettings": true
    },
    "startDuration": 1,
    "categoryAxis": {
        "gridPosition": "start",
        "position": "left"
    },
    "trendLines": [],
    "graphs": [
        {
            "balloonText": "Income:[[value]]",
            "fillAlphas": 0.8,
            "id": "AmGraph-1",
            "lineAlpha": 0.2,
            "title": "Income",
            "type": "column",
            "valueField": "income"
        },
        {
            "balloonText": "Expenses:[[value]]",
            "fillAlphas": 0.8,
            "id": "AmGraph-2",
            "lineAlpha": 0.2,
            "title": "Expenses",
            "type": "column",
            "valueField": "expenses"
        }
    ],
    "guides": [],
    "valueAxes": [
        {
            "id": "ValueAxis-1",
            "position": "top",
            "axisAlpha": 0
        }
    ],
    "allLabels": [],
    "balloon": {},
    "titles": [],
    "dataProvider": [
        {
            "year": 2005,
            "income": 23.5,
            "expenses": 18.1
        },
        {
            "year": 2006,
            "income": 26.2,
            "expenses": 22.8
        },
        {
            "year": 2007,
            "income": 30.1,
            "expenses": 23.9
        },
        {
            "year": 2008,
            "income": 29.5,
            "expenses": 25.1
        },
        {
            "year": 2009,
            "income": 24.6,
            "expenses": 25
        }
    ],
    "export": {
        "enabled": true
     }

});
</script>
<!-- HTML -->
<div id="chartdiv"></div>                               
</body>
</html>

（基于聚类条形图示例）可以 (de)select 收入或支出，但是否也可以有 (de)select 单独的图例年？例如。完全隐藏 2006 而显示其他年份或仅显示 2005 和 2009。?

我环顾四周，发现 some discussions 与我遇到的问题相似，但它们与我正在寻找的问题并不完全匹配。

有什么想法吗？

Answer 1

这不能使用 amCharts 的图例来完成。相反，您应该更改 dataProvider 并刷新图表。

例如，如果您想从图表中隐藏 2007 年：

HTML

<button type="button" onclick="hideYear(2007)">hide 2007</button>

JS

var my_data = [
    {
        "year": 2005,
        "income": 23.5,
        "expenses": 18.1
    },
    {
        "year": 2006,
        "income": 26.2,
        "expenses": 22.8
    },
    {
        "year": 2007,
        "income": 30.1,
        "expenses": 23.9
    },
    {
        // ...
    }
];

// create your chart initially using all data
var chart = AmCharts.makeChart("chartdiv", {
  "type": "serial",
  "dataProvider": my_data,
  // ...
});

function hideYear(year){

  var new_dataprovider = [];

  // loop over my_data
  my_data.forEach(function(item){
    if(item.year != year){
      new_dataprovider.push(item);
    }
  });

  // now that we have our new dataprovider
  // excluding a certain year,
  // update our chart
  chart.dataProvider = new_dataprovider;

  // validateData will refresh the chart
  chart.validateData();

}

根据您的图表配置，这将完全隐藏 2007 年（从类别轴）。您可能不想遗漏数据项，而是希望将 "income" 和 "expenses" 字段设置为 null，这样年份（类别）本身将保持可见。

希望这是有道理的。

Answer 2

感谢@Robbert 提供隐藏列的代码。我进一步解决了这个问题，现在您可以一次隐藏多个列，还可以使用选择菜单和两个按钮再次显示它们。完整代码在下面或可以在工作示例中找到 here.

<html>
<body>
<style>
#chartdiv {
    width       : 100%;
    height      : 500px;
    font-size   : 11px;
}                       
</style>
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<script>
var my_data = [
    {
        "year": 2005,
        "income": 23.5,
        "expenses": 18.1
    },
    {
        "year": 2006,
        "income": 26.2,
        "expenses": 22.8
    },
    {
        "year": 2007,
        "income": 30.1,
        "expenses": 23.9
    },
    {
        "year": 2008,
        "income": 26.1,
        "expenses": 24.4
    },
    {
        "year": 2009,
        "income": 24.1,
        "expenses": 23.7
    }
];

var chart = AmCharts.makeChart("chartdiv", {
    "type": "serial",
     "theme": "light",
    "categoryField": "year",
    "rotate": false,
    "legend": {
        "useGraphSettings": true
    },
    "startDuration": 1,
    "categoryAxis": {
        "gridPosition": "start",
        "position": "left"
    },
    "trendLines": [],
    "graphs": [
        {
            "balloonText": "Income:[[value]]",
            "fillAlphas": 0.8,
            "id": "AmGraph-1",
            "lineAlpha": 0.2,
            "title": "Income",
            "type": "column",
            "valueField": "income"
        },
        {
            "balloonText": "Expenses:[[value]]",
            "fillAlphas": 0.8,
            "id": "AmGraph-2",
            "lineAlpha": 0.2,
            "title": "Expenses",
            "type": "column",
            "valueField": "expenses"
        }
    ],
    "guides": [],
    "valueAxes": [
        {
            "id": "ValueAxis-1",
            "position": "top",
            "axisAlpha": 0
        }
    ],
    "allLabels": [],
    "balloon": {},
    "titles": [],
    "dataProvider": my_data,
    "export": {
        "enabled": true
     }
});
var hiddenYears = [];
function hideYear(){
    var selection = document.getElementById("yearSelection");
    var selectedYear = Number(selection.options[selection.selectedIndex].value);
    hiddenYears.push(selectedYear);

    var new_dataprovider = [];

    // loop over my_data
    my_data.forEach(function(item){
        if(!hiddenYears.includes(item.year)){
            new_dataprovider.push(item);
        }
    });

    // now that we have our new dataprovider
    // excluding a certain year,
    // update our chart
    chart.dataProvider = new_dataprovider;

    // validateData will refresh the chart
    chart.validateData();
}
function showYear(){
    var selection = document.getElementById("yearSelection");
    var selectedYear = Number(selection.options[selection.selectedIndex].value);
    var index = hiddenYears.indexOf(selectedYear);
    if (index > -1) {
        hiddenYears.splice(index, 1);
    }
    var new_dataprovider = [];
    my_data.forEach(function(item){
        if(!hiddenYears.includes(item.year)){
            new_dataprovider.push(item);
        }
    });
    // now that we have our new dataprovider
    // excluding a certain year,
    // update our chart
    chart.dataProvider = new_dataprovider;
    // validateData will refresh the chart
    chart.validateData();
}
</script>
<div id="chartdiv"></div>       
<select id="yearSelection">
    <option>Select a year</option>
</select>
<script>
var select = document.getElementById("yearSelection");
var options = [2005, 2006, 2007, 2008, 2009];
for(var i = 0; i < options.length; i++) {
    var opt = options[i];
    var el = document.createElement("option");
    el.textContent = opt;
    el.value = opt;
    select.appendChild(el);
}
</script>
<button type="button" onclick="hideYear(document.getElementById('yearSelection'))">Hide</button>
<button type="button" onclick="showYear(document.getElementById('yearSelection'))">Show</button>
</body>
</html>

可以通过图例隐藏带有 Amcharts 的列吗？

Hiding columns with Amcharts possible via legend?

javascript

legend

amcharts