时间戳

首页 > 解决方案 > AnyChart - 柱形图：获取汇总的一个类别的值

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

问题描述

我试图让一个小的 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，CA 应为 8 - 仅过滤会计师时，美国应为 5，CA 应为 9

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

提前感谢，如果这个问题已经得到解答，我很抱歉，我在尝试搜索时没有找到合适的答案。

标签： anychartanychart-8.2

解决方案

笛卡尔图不对用户数据应用任何聚合。如果同一类别（美国或加拿大）有多个值，图表将显示最新值。最新的值会覆盖以前的值。为了满足您的要求，您应该在应用于图表之前对数据进行预处理。这意味着在过滤器功能中，您应该根据过滤条件创建包含聚合值的新数据集。例如，您想显示“开发”中的员工总数。那么你应该总结美国和加州“发展”的“男性”和“女性”。然后生成的数据集应如下所示：

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

然后将这个新数据集应用到图表中。它可以在过滤器功能内部完成。

推荐阅读