AnyChart

Question

我试图让一个小的 AnyChart 图表正常工作，但我的数据设置有一些问题。我想要的是一种供用户过滤数据的方法。因此，我必须提供在数据集中过滤所需的所有信息。在图表中，仅使用顶级类别，并且应显示过滤器适用的所有行的汇总值。

代码来了：

<html>
<body>
<script src="https://cdn.anychart.com/releases/8.2.1/js/anychart-bundle.min.js"></script>

<select id='depFilter'><option value='*'>All</option><option value='Development'>Development</option><option value='Accounting'>Accounting</option><option value='Sales'>Sales</option></select><br>
<select id='genderFilter'><option value='*'>All</option><option value='female'>female</option><option value='male'>male</option></select><br>
<button onClick='filterChart()'>Filter</button><br>
<div id="container"></div>

<script language='JavaScript'>
anychart.onDocumentReady(function() {
  // create line chart
  var dataSet = anychart.data.set([
    ["US", "Development", "male", 20],
    ["US", "Development", "female", 3],
    ["US", "Accounting", "male", 1],
    ["US", "Accounting", "female", 4],
    ["US", "Sales", "male", 15],
    ["US", "Sales", "female", 16],
    ["CA", "Development", "male", 12],
    ["CA", "Development", "female", 25],
    ["CA", "Accounting", "male", 1],
    ["CA", "Accounting", "female", 8],  
    ["CA", "Sales", "male", 30],
    ["CA", "Sales", "female", 18],  
  ]);

  chart = anychart.column();
  baseMapping = dataSet.mapAs({'x': 0, 'dep': 1, 'gender': 2, 'value': 3});
  series = chart.column();

  filterChart();

  chart.container('container');
  chart.draw();
});

function filterChart() {
  var filteredMapping = baseMapping.filter("dep", function(value) { return document.getElementById("depFilter").value == '*' || value == document.getElementById("depFilter").value; });
  filteredMapping = filteredMapping.filter("gender", function(value) { return document.getElementById("genderFilter").value == '*' || value == document.getElementById("genderFilter").value; });

  series.data(filteredMapping);
}
</script>

如您所见，每个国家/地区都有针对部门和性别的过滤器。值是员工人数。到目前为止，该图表仅显示每个区域的最新数据点。它应该做的是显示过滤器适用的所有员工的总和。例子： - 过滤女性会计师时，美国应为 4，加利福尼亚应为 8 - 仅针对会计师过滤时，美国应为 5，CA 应为 9

xMode() 函数没有完成这项工作，因为它不总结而只是覆盖。有没有办法让它在 AnyChart 中工作？

提前致谢，如果这个问题已经得到解答，我深表歉意，我在搜索时没有找到合适的答案。

Answer 1

笛卡尔图表不对用户数据应用任何聚合。如果同一类别（美国或加拿大）有多个值，图表将显示最新值。最新值覆盖以前的值。为了满足您的要求，您应该在应用于图表之前预处理数据。这意味着在过滤功能中，您应该根据过滤条件创建包含聚合值的新数据集。例如，您要显示 "development" 中的员工总数。那么您应该将美国和加拿大的 "development" 的 "male" 和 "female" 相加。那么生成的数据集应该如下所示：

  var dataSet = anychart.data.set([
    ["US", 23],
    ["CA", 37]
  ]);

然后将这个新数据集应用到图表中。可以在过滤函数里面完成。

AnyChart - 柱形图：获取汇总的一个类别的值

AnyChart - Column Chart: get values of one category summarized

anychart-8.2