amCharts: Фильтр JSON

Я использую amCharts показать квартальный продаж-цифры от компании с 2000 годаamCharts: Фильтр JSON

Все данные в квартальных графиков исходит из одного массива, как этот очень упрощенным:

var myNumbers = [{ 
    "quarter":"2000 Q1", 
    "CountX":2407, 
    "CountY":8788, 
    "CountZ":3421 
},{ 
    … 
},{ 
    "quarter":"2016 Q3", 
    "CountX":4252, 
    "CountY":12387, 
    "CountZ":43446 
},{ 
    "quarter":"2016 Q4", 
    "CountX":4886, 
    "CountY":16879, 
    "CountZ":43446 
}]

Что я могу сделать с amCharts очень легко с этим VAR, это показать большой график с присутствующими кварталами ... Q1 2000, Q2 2000, Q3 2000, Q4 2000, Q1 2001, Q2 2001 и т. Д. До Q4 2016.

Теперь я хотел бы добавить график, который позволяет использовать RS выбрать только отображать все Q1 или всех Q3 от всех лет, поэтому они могут сравнить все Q1 четверти от 2000 через 2017 год все без Q2, Q3 и Q4 ... или все Q2 с 2000 года до 2017 года без Q1, Q3 и Q4 и т. д.

Как это возможно, без необходимости добавлять другую JS-Variable с данными только из Q1 каждого года, а еще один - только с Q2 каждого года и т. Д.? Было бы здорово, если бы я мог использовать один и тот же большой var для всех графиков, так как данные (в моем восприятии ;-)) действительно тяжелый. Таким образом, сокращение массива данных, вероятно, было бы лучше.

Лучшим решением, конечно, было бы, если бы я мог добавить (вторую) интерактивную Легенду к графикам, где пользователь может выбрать только отображение «Q1» или «Q2» - или что-то в этом роде.

Похоже, что в базе знаний amCharts уже есть что-то подобное https://www.amcharts.com/kbase/dynamically-changing-data-granularity-serial-chart/ ... но как я могу адаптировать это решение, чтобы он работал с 4-мя ссылками («Q1», «Q2», «Q3», «Q4») вместо выпадающего списка и показывает мне все Q1, Q2 и т. д. всех лет, если я нажму на них?

источник

2017-01-13 albuvee

Существует не встроенный способ фильтрации диаграммы, как то, как вы описываете. Для обновления диаграммы вам понадобится использовать пользовательский HTML и JS.

Чтобы использовать пример базы знаний, вы можете создавать внешние ссылки/кнопки в HTML и присоединять к ним слушателей, которые фильтруют ваши данные, обновляют dataProvider диаграммы и звонят validateData. Поскольку ваши данные не используют ось категории по дате, вам не нужно беспокоиться о minPeriod или любых других свойствах, связанных с датами, упомянутых в базе знаний.

Вот один подход:

var chartData = [{ 
 
    "CountY": 31, 
 
    "CountX": 16, 
 
    "CountZ": 63, 
 
    "quarter": "2001 Q1" 
 
}, { 
 
    "CountY": 35, 
 
    "CountX": 19, 
 
    "CountZ": 53, 
 
    "quarter": "2001 Q2" 
 
}, { 
 
    "CountY": 46, 
 
    "CountX": 20, 
 
    "CountZ": 60, 
 
    "quarter": "2001 Q3" 
 
}, { 
 
    "CountY": 39, 
 
    "CountX": 16, 
 
    "CountZ": 52, 
 
    "quarter": "2001 Q4" 
 
}, { 
 
    "CountY": 34, 
 
    "CountX": 21, 
 
    "CountZ": 63, 
 
    "quarter": "2002 Q1" 
 
}, { 
 
    "CountY": 41, 
 
    "CountX": 24, 
 
    "CountZ": 62, 
 
    "quarter": "2002 Q2" 
 
}, { 
 
    "CountY": 32, 
 
    "CountX": 29, 
 
    "CountZ": 67, 
 
    "quarter": "2002 Q3" 
 
}, { 
 
    "CountY": 33, 
 
    "CountX": 20, 
 
    "CountZ": 54, 
 
    "quarter": "2002 Q4" 
 
}, { 
 
    "CountY": 47, 
 
    "CountX": 15, 
 
    "CountZ": 70, 
 
    "quarter": "2003 Q1" 
 
}, { 
 
    "CountY": 48, 
 
    "CountX": 25, 
 
    "CountZ": 52, 
 
    "quarter": "2003 Q2" 
 
}, { 
 
    "CountY": 40, 
 
    "CountX": 25, 
 
    "CountZ": 51, 
 
    "quarter": "2003 Q3" 
 
}, { 
 
    "CountY": 39, 
 
    "CountX": 25, 
 
    "CountZ": 65, 
 
    "quarter": "2003 Q4" 
 
}, { 
 
    "CountY": 49, 
 
    "CountX": 29, 
 
    "CountZ": 64, 
 
    "quarter": "2004 Q1" 
 
}, { 
 
    "CountY": 34, 
 
    "CountX": 20, 
 
    "CountZ": 62, 
 
    "quarter": "2004 Q2" 
 
}, { 
 
    "CountY": 32, 
 
    "CountX": 27, 
 
    "CountZ": 57, 
 
    "quarter": "2004 Q3" 
 
}, { 
 
    "CountY": 31, 
 
    "CountX": 24, 
 
    "CountZ": 52, 
 
    "quarter": "2004 Q4" 
 
}, { 
 
    "CountY": 41, 
 
    "CountX": 30, 
 
    "CountZ": 60, 
 
    "quarter": "2005 Q1" 
 
}, { 
 
    "CountY": 40, 
 
    "CountX": 27, 
 
    "CountZ": 65, 
 
    "quarter": "2005 Q2" 
 
}, { 
 
    "CountY": 31, 
 
    "CountX": 17, 
 
    "CountZ": 56, 
 
    "quarter": "2005 Q3" 
 
}, { 
 
    "CountY": 41, 
 
    "CountX": 26, 
 
    "CountZ": 65, 
 
    "quarter": "2005 Q4" 
 
}, { 
 
    "CountY": 49, 
 
    "CountX": 20, 
 
    "CountZ": 59, 
 
    "quarter": "2006 Q1" 
 
}, { 
 
    "CountY": 43, 
 
    "CountX": 17, 
 
    "CountZ": 60, 
 
    "quarter": "2006 Q2" 
 
}, { 
 
    "CountY": 33, 
 
    "CountX": 24, 
 
    "CountZ": 62, 
 
    "quarter": "2006 Q3" 
 
}, { 
 
    "CountY": 40, 
 
    "CountX": 22, 
 
    "CountZ": 68, 
 
    "quarter": "2006 Q4" 
 
}, { 
 
    "CountY": 37, 
 
    "CountX": 25, 
 
    "CountZ": 57, 
 
    "quarter": "2007 Q1" 
 
}, { 
 
    "CountY": 33, 
 
    "CountX": 15, 
 
    "CountZ": 65, 
 
    "quarter": "2007 Q2" 
 
}, { 
 
    "CountY": 39, 
 
    "CountX": 21, 
 
    "CountZ": 52, 
 
    "quarter": "2007 Q3" 
 
}, { 
 
    "CountY": 39, 
 
    "CountX": 25, 
 
    "CountZ": 70, 
 
    "quarter": "2007 Q4" 
 
}, { 
 
    "CountY": 37, 
 
    "CountX": 29, 
 
    "CountZ": 52, 
 
    "quarter": "2008 Q1" 
 
}, { 
 
    "CountY": 32, 
 
    "CountX": 30, 
 
    "CountZ": 69, 
 
    "quarter": "2008 Q2" 
 
}, { 
 
    "CountY": 31, 
 
    "CountX": 26, 
 
    "CountZ": 53, 
 
    "quarter": "2008 Q3" 
 
}, { 
 
    "CountY": 34, 
 
    "CountX": 30, 
 
    "CountZ": 68, 
 
    "quarter": "2008 Q4" 
 
}, { 
 
    "CountY": 37, 
 
    "CountX": 20, 
 
    "CountZ": 70, 
 
    "quarter": "2009 Q1" 
 
}, { 
 
    "CountY": 43, 
 
    "CountX": 15, 
 
    "CountZ": 58, 
 
    "quarter": "2009 Q2" 
 
}, { 
 
    "CountY": 43, 
 
    "CountX": 22, 
 
    "CountZ": 58, 
 
    "quarter": "2009 Q3" 
 
}, { 
 
    "CountY": 34, 
 
    "CountX": 27, 
 
    "CountZ": 62, 
 
    "quarter": "2009 Q4" 
 
}, { 
 
    "CountY": 42, 
 
    "CountX": 28, 
 
    "CountZ": 60, 
 
    "quarter": "2010 Q1" 
 
}, { 
 
    "CountY": 43, 
 
    "CountX": 15, 
 
    "CountZ": 60, 
 
    "quarter": "2010 Q2" 
 
}, { 
 
    "CountY": 31, 
 
    "CountX": 29, 
 
    "CountZ": 68, 
 
    "quarter": "2010 Q3" 
 
}, { 
 
    "CountY": 45, 
 
    "CountX": 24, 
 
    "CountZ": 60, 
 
    "quarter": "2010 Q4" 
 
}, { 
 
    "CountY": 31, 
 
    "CountX": 15, 
 
    "CountZ": 60, 
 
    "quarter": "2011 Q1" 
 
}, { 
 
    "CountY": 33, 
 
    "CountX": 29, 
 
    "CountZ": 65, 
 
    "quarter": "2011 Q2" 
 
}, { 
 
    "CountY": 34, 
 
    "CountX": 21, 
 
    "CountZ": 64, 
 
    "quarter": "2011 Q3" 
 
}, { 
 
    "CountY": 48, 
 
    "CountX": 23, 
 
    "CountZ": 69, 
 
    "quarter": "2011 Q4" 
 
}, { 
 
    "CountY": 49, 
 
    "CountX": 15, 
 
    "CountZ": 56, 
 
    "quarter": "2012 Q1" 
 
}, { 
 
    "CountY": 33, 
 
    "CountX": 19, 
 
    "CountZ": 51, 
 
    "quarter": "2012 Q2" 
 
}, { 
 
    "CountY": 31, 
 
    "CountX": 20, 
 
    "CountZ": 62, 
 
    "quarter": "2012 Q3" 
 
}, { 
 
    "CountY": 42, 
 
    "CountX": 22, 
 
    "CountZ": 52, 
 
    "quarter": "2012 Q4" 
 
}, { 
 
    "CountY": 46, 
 
    "CountX": 18, 
 
    "CountZ": 59, 
 
    "quarter": "2013 Q1" 
 
}, { 
 
    "CountY": 39, 
 
    "CountX": 15, 
 
    "CountZ": 51, 
 
    "quarter": "2013 Q2" 
 
}, { 
 
    "CountY": 32, 
 
    "CountX": 29, 
 
    "CountZ": 68, 
 
    "quarter": "2013 Q3" 
 
}, { 
 
    "CountY": 35, 
 
    "CountX": 28, 
 
    "CountZ": 61, 
 
    "quarter": "2013 Q4" 
 
}, { 
 
    "CountY": 31, 
 
    "CountX": 19, 
 
    "CountZ": 63, 
 
    "quarter": "2014 Q1" 
 
}, { 
 
    "CountY": 37, 
 
    "CountX": 16, 
 
    "CountZ": 58, 
 
    "quarter": "2014 Q2" 
 
}, { 
 
    "CountY": 37, 
 
    "CountX": 15, 
 
    "CountZ": 57, 
 
    "quarter": "2014 Q3" 
 
}, { 
 
    "CountY": 44, 
 
    "CountX": 26, 
 
    "CountZ": 58, 
 
    "quarter": "2014 Q4" 
 
}, { 
 
    "CountY": 33, 
 
    "CountX": 23, 
 
    "CountZ": 58, 
 
    "quarter": "2015 Q1" 
 
}, { 
 
    "CountY": 46, 
 
    "CountX": 20, 
 
    "CountZ": 52, 
 
    "quarter": "2015 Q2" 
 
}, { 
 
    "CountY": 48, 
 
    "CountX": 20, 
 
    "CountZ": 61, 
 
    "quarter": "2015 Q3" 
 
}, { 
 
    "CountY": 50, 
 
    "CountX": 22, 
 
    "CountZ": 60, 
 
    "quarter": "2015 Q4" 
 
}]; 
 

 
function filterByQuarter(quarter) { 
 
    return function(dataItem) { 
 
    return dataItem.quarter.indexOf(quarter) !== -1; 
 
    } 
 
} 
 

 
function filterData(quarter) { 
 
    chart.dataProvider = chartData.filter(filterByQuarter(quarter)); 
 
    chart.validateData(); 
 
} 
 

 
function resetChart() { 
 
    chart.dataProvider = chartData; 
 
    chart.validateData(); 
 
} 
 

 
Array.prototype.forEach.call(
 
    document.querySelectorAll('.filterButton'), 
 
    function(button) { 
 
    if (button.dataset.quarter === "reset") { 
 
     button.addEventListener('click', resetChart); 
 
    } else { 
 
     button.addEventListener('click', function() { 
 
     filterData(button.dataset.quarter); 
 
     }); 
 
    } 
 
    } 
 
); 
 

 
var chart = AmCharts.makeChart("chartdiv", { 
 
    "type": "serial", 
 
    "dataProvider": chartData, 
 
    "categoryField": "quarter", 
 
    "categoryAxis": { 
 
    "labelRotation": 45 
 
    }, 
 
    "graphs": [{ 
 
    "bullet": "round", 
 
    "balloonText": "[[category]]: [[value]]", 
 
    "valueField": "CountX" 
 
    }, { 
 
    "bullet": "round", 
 
    "balloonText": "[[category]]: [[value]]", 
 
    "valueField": "CountY" 
 
    }, { 
 
    "bullet": "round", 
 
    "balloonText": "[[category]]: [[value]]", 
 
    "valueField": "CountZ" 
 
    }] 
 
});

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

<script src="//www.amcharts.com/lib/3/amcharts.js"></script> 
 
<script src="//www.amcharts.com/lib/3/serial.js"></script> 
 
<div class="buttons"> 
 
    <button class="filterButton" data-quarter="Q1">Q1</button> 
 
    <button class="filterButton" data-quarter="Q2">Q2</button> 
 
    <button class="filterButton" data-quarter="Q3">Q3</button> 
 
    <button class="filterButton" data-quarter="Q4">Q4</button> 
 
    <button class="filterButton" data-quarter="reset">Reset</button> 
 
</div> 
 
<div id="chartdiv"></div>

Редактировать

Для нескольких диаграмм можно изменить код выше, чтобы принять экземпляры диаграммы в качестве параметров, а затем изменить методы слушателя для передачи объекта диаграммы в качестве одного из параметров. Это упростится, если вы привязываете идентификаторы диаграммы к атрибуту данных кнопок, чтобы легче связать их.

var charts = {}; 
 
var chartData = [{ 
 
    "CountY": 31, 
 
    "CountX": 16, 
 
    "CountZ": 63, 
 
    "quarter": "2001 Q1" 
 
}, { 
 
    "CountY": 35, 
 
    "CountX": 19, 
 
    "CountZ": 53, 
 
    "quarter": "2001 Q2" 
 
}, { 
 
    "CountY": 46, 
 
    "CountX": 20, 
 
    "CountZ": 60, 
 
    "quarter": "2001 Q3" 
 
}, { 
 
    "CountY": 39, 
 
    "CountX": 16, 
 
    "CountZ": 52, 
 
    "quarter": "2001 Q4" 
 
}, { 
 
    "CountY": 34, 
 
    "CountX": 21, 
 
    "CountZ": 63, 
 
    "quarter": "2002 Q1" 
 
}, { 
 
    "CountY": 41, 
 
    "CountX": 24, 
 
    "CountZ": 62, 
 
    "quarter": "2002 Q2" 
 
}, { 
 
    "CountY": 32, 
 
    "CountX": 29, 
 
    "CountZ": 67, 
 
    "quarter": "2002 Q3" 
 
}, { 
 
    "CountY": 33, 
 
    "CountX": 20, 
 
    "CountZ": 54, 
 
    "quarter": "2002 Q4" 
 
}, { 
 
    "CountY": 47, 
 
    "CountX": 15, 
 
    "CountZ": 70, 
 
    "quarter": "2003 Q1" 
 
}, { 
 
    "CountY": 48, 
 
    "CountX": 25, 
 
    "CountZ": 52, 
 
    "quarter": "2003 Q2" 
 
}, { 
 
    "CountY": 40, 
 
    "CountX": 25, 
 
    "CountZ": 51, 
 
    "quarter": "2003 Q3" 
 
}, { 
 
    "CountY": 39, 
 
    "CountX": 25, 
 
    "CountZ": 65, 
 
    "quarter": "2003 Q4" 
 
}, { 
 
    "CountY": 49, 
 
    "CountX": 29, 
 
    "CountZ": 64, 
 
    "quarter": "2004 Q1" 
 
}, { 
 
    "CountY": 34, 
 
    "CountX": 20, 
 
    "CountZ": 62, 
 
    "quarter": "2004 Q2" 
 
}, { 
 
    "CountY": 32, 
 
    "CountX": 27, 
 
    "CountZ": 57, 
 
    "quarter": "2004 Q3" 
 
}, { 
 
    "CountY": 31, 
 
    "CountX": 24, 
 
    "CountZ": 52, 
 
    "quarter": "2004 Q4" 
 
}, { 
 
    "CountY": 41, 
 
    "CountX": 30, 
 
    "CountZ": 60, 
 
    "quarter": "2005 Q1" 
 
}, { 
 
    "CountY": 40, 
 
    "CountX": 27, 
 
    "CountZ": 65, 
 
    "quarter": "2005 Q2" 
 
}, { 
 
    "CountY": 31, 
 
    "CountX": 17, 
 
    "CountZ": 56, 
 
    "quarter": "2005 Q3" 
 
}, { 
 
    "CountY": 41, 
 
    "CountX": 26, 
 
    "CountZ": 65, 
 
    "quarter": "2005 Q4" 
 
}, { 
 
    "CountY": 49, 
 
    "CountX": 20, 
 
    "CountZ": 59, 
 
    "quarter": "2006 Q1" 
 
}, { 
 
    "CountY": 43, 
 
    "CountX": 17, 
 
    "CountZ": 60, 
 
    "quarter": "2006 Q2" 
 
}, { 
 
    "CountY": 33, 
 
    "CountX": 24, 
 
    "CountZ": 62, 
 
    "quarter": "2006 Q3" 
 
}, { 
 
    "CountY": 40, 
 
    "CountX": 22, 
 
    "CountZ": 68, 
 
    "quarter": "2006 Q4" 
 
}, { 
 
    "CountY": 37, 
 
    "CountX": 25, 
 
    "CountZ": 57, 
 
    "quarter": "2007 Q1" 
 
}, { 
 
    "CountY": 33, 
 
    "CountX": 15, 
 
    "CountZ": 65, 
 
    "quarter": "2007 Q2" 
 
}, { 
 
    "CountY": 39, 
 
    "CountX": 21, 
 
    "CountZ": 52, 
 
    "quarter": "2007 Q3" 
 
}, { 
 
    "CountY": 39, 
 
    "CountX": 25, 
 
    "CountZ": 70, 
 
    "quarter": "2007 Q4" 
 
}, { 
 
    "CountY": 37, 
 
    "CountX": 29, 
 
    "CountZ": 52, 
 
    "quarter": "2008 Q1" 
 
}, { 
 
    "CountY": 32, 
 
    "CountX": 30, 
 
    "CountZ": 69, 
 
    "quarter": "2008 Q2" 
 
}, { 
 
    "CountY": 31, 
 
    "CountX": 26, 
 
    "CountZ": 53, 
 
    "quarter": "2008 Q3" 
 
}, { 
 
    "CountY": 34, 
 
    "CountX": 30, 
 
    "CountZ": 68, 
 
    "quarter": "2008 Q4" 
 
}, { 
 
    "CountY": 37, 
 
    "CountX": 20, 
 
    "CountZ": 70, 
 
    "quarter": "2009 Q1" 
 
}, { 
 
    "CountY": 43, 
 
    "CountX": 15, 
 
    "CountZ": 58, 
 
    "quarter": "2009 Q2" 
 
}, { 
 
    "CountY": 43, 
 
    "CountX": 22, 
 
    "CountZ": 58, 
 
    "quarter": "2009 Q3" 
 
}, { 
 
    "CountY": 34, 
 
    "CountX": 27, 
 
    "CountZ": 62, 
 
    "quarter": "2009 Q4" 
 
}, { 
 
    "CountY": 42, 
 
    "CountX": 28, 
 
    "CountZ": 60, 
 
    "quarter": "2010 Q1" 
 
}, { 
 
    "CountY": 43, 
 
    "CountX": 15, 
 
    "CountZ": 60, 
 
    "quarter": "2010 Q2" 
 
}, { 
 
    "CountY": 31, 
 
    "CountX": 29, 
 
    "CountZ": 68, 
 
    "quarter": "2010 Q3" 
 
}, { 
 
    "CountY": 45, 
 
    "CountX": 24, 
 
    "CountZ": 60, 
 
    "quarter": "2010 Q4" 
 
}, { 
 
    "CountY": 31, 
 
    "CountX": 15, 
 
    "CountZ": 60, 
 
    "quarter": "2011 Q1" 
 
}, { 
 
    "CountY": 33, 
 
    "CountX": 29, 
 
    "CountZ": 65, 
 
    "quarter": "2011 Q2" 
 
}, { 
 
    "CountY": 34, 
 
    "CountX": 21, 
 
    "CountZ": 64, 
 
    "quarter": "2011 Q3" 
 
}, { 
 
    "CountY": 48, 
 
    "CountX": 23, 
 
    "CountZ": 69, 
 
    "quarter": "2011 Q4" 
 
}, { 
 
    "CountY": 49, 
 
    "CountX": 15, 
 
    "CountZ": 56, 
 
    "quarter": "2012 Q1" 
 
}, { 
 
    "CountY": 33, 
 
    "CountX": 19, 
 
    "CountZ": 51, 
 
    "quarter": "2012 Q2" 
 
}, { 
 
    "CountY": 31, 
 
    "CountX": 20, 
 
    "CountZ": 62, 
 
    "quarter": "2012 Q3" 
 
}, { 
 
    "CountY": 42, 
 
    "CountX": 22, 
 
    "CountZ": 52, 
 
    "quarter": "2012 Q4" 
 
}, { 
 
    "CountY": 46, 
 
    "CountX": 18, 
 
    "CountZ": 59, 
 
    "quarter": "2013 Q1" 
 
}, { 
 
    "CountY": 39, 
 
    "CountX": 15, 
 
    "CountZ": 51, 
 
    "quarter": "2013 Q2" 
 
}, { 
 
    "CountY": 32, 
 
    "CountX": 29, 
 
    "CountZ": 68, 
 
    "quarter": "2013 Q3" 
 
}, { 
 
    "CountY": 35, 
 
    "CountX": 28, 
 
    "CountZ": 61, 
 
    "quarter": "2013 Q4" 
 
}, { 
 
    "CountY": 31, 
 
    "CountX": 19, 
 
    "CountZ": 63, 
 
    "quarter": "2014 Q1" 
 
}, { 
 
    "CountY": 37, 
 
    "CountX": 16, 
 
    "CountZ": 58, 
 
    "quarter": "2014 Q2" 
 
}, { 
 
    "CountY": 37, 
 
    "CountX": 15, 
 
    "CountZ": 57, 
 
    "quarter": "2014 Q3" 
 
}, { 
 
    "CountY": 44, 
 
    "CountX": 26, 
 
    "CountZ": 58, 
 
    "quarter": "2014 Q4" 
 
}, { 
 
    "CountY": 33, 
 
    "CountX": 23, 
 
    "CountZ": 58, 
 
    "quarter": "2015 Q1" 
 
}, { 
 
    "CountY": 46, 
 
    "CountX": 20, 
 
    "CountZ": 52, 
 
    "quarter": "2015 Q2" 
 
}, { 
 
    "CountY": 48, 
 
    "CountX": 20, 
 
    "CountZ": 61, 
 
    "quarter": "2015 Q3" 
 
}, { 
 
    "CountY": 50, 
 
    "CountX": 22, 
 
    "CountZ": 60, 
 
    "quarter": "2015 Q4" 
 
}]; 
 

 
function filterByQuarter(quarter) { 
 
    return function(dataItem) { 
 
    return dataItem.quarter.indexOf(quarter) !== -1; 
 
    } 
 
} 
 

 
function filterData(chart, quarter) { 
 
    chart.dataProvider = chartData.filter(filterByQuarter(quarter)); 
 
    chart.validateData(); 
 
} 
 

 
function resetChart(chart) { 
 
    chart.dataProvider = chartData; 
 
    chart.validateData(); 
 
} 
 

 
charts['chartdiv'] = AmCharts.makeChart("chartdiv", { 
 
    "type": "serial", 
 
    "dataProvider": chartData, 
 
    "categoryField": "quarter", 
 
    "categoryAxis": { 
 
    "labelRotation": 45 
 
    }, 
 
    "graphs": [{ 
 
    "bullet": "round", 
 
    "balloonText": "[[category]]: [[value]]", 
 
    "valueField": "CountX" 
 
    }, { 
 
    "bullet": "round", 
 
    "balloonText": "[[category]]: [[value]]", 
 
    "valueField": "CountY" 
 
    }, { 
 
    "bullet": "round", 
 
    "balloonText": "[[category]]: [[value]]", 
 
    "valueField": "CountZ" 
 
    }] 
 
}); 
 

 
charts['chartdiv2'] = AmCharts.makeChart("chartdiv2", { 
 
    "type": "serial", 
 
    "dataProvider": chartData, 
 
    "depth3D": 30, 
 
    "angle": 30, 
 
    "categoryField": "quarter", 
 
    "categoryAxis": { 
 
    "labelRotation": 45 
 
    }, 
 
    "graphs": [{ 
 
    "type": "column", 
 
    "fillAlphas": 1, 
 
    "balloonText": "[[category]]: [[value]]", 
 
    "valueField": "CountX" 
 
    }, { 
 
    "type": "column", 
 
    "fillAlphas": 1, 
 
    "balloonText": "[[category]]: [[value]]", 
 
    "valueField": "CountY" 
 
    }] 
 
}); 
 

 
charts['chartdiv3'] = AmCharts.makeChart("chartdiv3", { 
 
    "type": "serial", 
 
    "dataProvider": chartData, 
 
    "categoryField": "quarter", 
 
    "categoryAxis": { 
 
    "labelRotation": 45 
 
    }, 
 
    "valueAxes": [{ 
 
    "stackType": "100%" 
 
    }], 
 
    "graphs": [{ 
 
    "type": "column", 
 
    "fillAlphas": 1, 
 
    "balloonText": "[[category]]: [[value]]", 
 
    "valueField": "CountX" 
 
    }, { 
 
    "type": "column", 
 
    "fillAlphas": 1, 
 
    "balloonText": "[[category]]: [[value]]", 
 
    "valueField": "CountY" 
 
    }, { 
 
    "type": "column", 
 
    "fillAlphas": 1, 
 
    "balloonText": "[[category]]: [[value]]", 
 
    "valueField": "CountZ" 
 
    }] 
 
}); 
 

 
Array.prototype.forEach.call(
 
    document.querySelectorAll('.filterButton'), 
 
    function(button) { 
 
    if (button.dataset.quarter === "reset") { 
 
     button.addEventListener('click', resetChart.bind(null, charts[button.dataset.chart])); 
 
    } else { 
 
     button.addEventListener('click', filterData.bind(null, charts[button.dataset.chart], button.dataset.quarter)); 
 
    } 
 
    } 
 
);

.chart { 
 
    width: 100%; 
 
    height: 300px; 
 
}

<script src="//www.amcharts.com/lib/3/amcharts.js"></script> 
 
<script src="//www.amcharts.com/lib/3/serial.js"></script> 
 
<div class="buttons"> 
 
    <button class="filterButton" data-quarter="Q1" data-chart="chartdiv">Q1</button> 
 
    <button class="filterButton" data-quarter="Q2" data-chart="chartdiv">Q2</button> 
 
    <button class="filterButton" data-quarter="Q3" data-chart="chartdiv">Q3</button> 
 
    <button class="filterButton" data-quarter="Q4" data-chart="chartdiv">Q4</button> 
 
    <button class="filterButton" data-quarter="reset" data-chart="chartdiv">Reset</button> 
 
</div> 
 
<div class="chart" id="chartdiv"></div> 
 
<hr> 
 
<div class="buttons"> 
 
    <button class="filterButton" data-quarter="Q1" data-chart="chartdiv2">Q1</button> 
 
    <button class="filterButton" data-quarter="Q2" data-chart="chartdiv2">Q2</button> 
 
    <button class="filterButton" data-quarter="Q3" data-chart="chartdiv2">Q3</button> 
 
    <button class="filterButton" data-quarter="Q4" data-chart="chartdiv2">Q4</button> 
 
    <button class="filterButton" data-quarter="reset" data-chart="chartdiv2">Reset</button> 
 
</div> 
 
<div class="chart" id="chartdiv2"></div> 
 
<hr> 
 
<div class="buttons"> 
 
    <button class="filterButton" data-quarter="Q1" data-chart="chartdiv3">Q1</button> 
 
    <button class="filterButton" data-quarter="Q2" data-chart="chartdiv3">Q2</button> 
 
    <button class="filterButton" data-quarter="Q3" data-chart="chartdiv3">Q3</button> 
 
    <button class="filterButton" data-quarter="Q4" data-chart="chartdiv3">Q4</button> 
 
    <button class="filterButton" data-quarter="reset" data-chart="chartdiv3">Reset</button> 
 
</div> 
 
<div class="chart" id="chartdiv3"></div>

Обратите внимание, что я переехал Foreach инициализатор так, чтобы объект диаграммы может быть определен перед добавлением слушателей.Это исходит из предположения в комментариях, что диаграммы все разделяют один и тот же массив данных.

источник

2017-01-13 12:21:54 xorspark

Это выглядит великолепно! : -O, но у меня есть некоторые проблемы, реализующие это ... для начала, может быть, потому, что я использую amCharts для отображения нескольких графиков, а не только ... это тоже возможно? (например, с 'AmCharts.ready (function() {var chartY1 = new AmCharts.AmSerialChart(); chartY1.dataProvider = myNumbers; ...') – albuvee

Это должно работать нормально, независимо от того, выполняете ли вы его старый объектно-ориентированный путь (т. е. 'новый AmCharts.AmSerialChart()') или текущий JSON-метод создания диаграмм. Те же свойства существуют в обоих сценариях. Обратите внимание, что AmCharts.ready функционально эквивалентен window.onload/$ (document) .ready()/etc, поэтому вы, вероятно, не нуждаетесь в нем, если вы уже завертываете его в собственную оболочку onload или включаете свой скрипт в конце страницы. Если вы можете предоставить скрипт, представляющий ваш сценарий, и проблемы, которые вы используете я хотел бы указать, что не так. – xorspark

Также обратите внимание, что приведенный мной пример предполагает, что он имеет доступ к экземпляру диаграммы. Вам нужно будет соответствующим образом скорректировать код или включить его в готовый обертку, чтобы все находится в том же объеме. – xorspark

ответ

Смежные вопросы