AnyChart - Столбчатая диаграмма: получить значения одной категории - PullRequest
Новая
       26

AnyChart - Столбчатая диаграмма: получить значения одной категории

0 голосов
/ 09 января 2020

Я пытался заставить работать небольшую диаграмму 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 в CA - при фильтрации только для бухгалтеров это должно быть 5 для США и 9 для CA

Функция xMode () не выполняла работу поскольку это не суммирует, а только наложение. Есть ли способ заставить это работать в AnyChart?

Заранее спасибо и извините, если на этот вопрос уже был дан ответ, я не нашел подходящего ответа при попытке найти его.

1 Ответ

0 голосов
/ 10 января 2020

Декартовая диаграмма не применяет агрегации к данным пользователя. Если есть несколько значений для одной и той же категории (США или CA), на диаграмме будет показано последнее значение. Последнее значение переопределяет предыдущие. Чтобы удовлетворить ваши требования, вы должны предварительно обработать данные перед применением к диаграмме. Это означает, что в функции фильтра вы должны создать новый набор данных, который включает агрегированные значения в соответствии с условиями фильтрации. Например, вы хотите показать общее количество сотрудников в «разработке». Затем вы должны суммировать «мужской» и «женский» «развития» в США и ЦА. Тогда результирующий набор данных должен выглядеть следующим образом: 

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

И затем применить этот новый набор данных к диаграмме. Это можно сделать внутри функции фильтра.

...