У меня есть панель из 3 графиков: гистограмма и 2 круговые диаграммы. Круговые диаграммы - «месяц» и «год». На гистограмме показаны 10 лучших данных. Таким образом, если я нажму на определенный месяц и год, гистограмма обновится, чтобы отразить 10 лучших значений (с их подсчетом по оси Y). Я хочу, чтобы можно было просмотреть обновление гистограммы (после продолжительности) из нескольких вариантов.dc.js/Как изменить выбранные значения столбчатой диаграммы автоматически после продолжительности?
Например, я хочу увидеть январь 2015 года сверху 10 .. затем в феврале 2015 года, затем 10 .. затем в марте 2015 года вверху 10 .. и так далее. Я хочу иметь возможность сделать это, не нажимая на график. Я просто хочу сесть и посмотреть видео.
Как это сделать?
Вот код, с некоторыми данными выборки:
var data = [
{"name": "apple", "count": 2, "month": "January", "Yr": "2015", "MYr": "Y2015_M01"},
{"name": "apple", "count": 3, "month": "February", "Yr": "2015", "MYr": "Y2015_M02"},
{"name": "apple", "count": 6, "month": "July", "Yr": "2015", "MYr": "Y2015_M07"},
{"name": "apple", "count": 1, "month": "September", "Yr": "2015", "MYr": "Y2015_M09"},
{"name": "bread", "count": 1, "month": "January", "Yr": "2015", "MYr": "Y2015_M01"},
{"name": "bread", "count": 1, "month": "March", "Yr": "2015", "MYr": "Y2015_M03"},
{"name": "bread", "count": 2, "month": "December", "Yr": "2015", "MYr": "Y2015_M12"},
{"name": "orange", "count": 12, "month": "January", "Yr": "2015", "MYr": "Y2015_M01"}
];
var ndx = crossfilter(data); // all data
// bar graph:
var bar = dc.barChart("#bar_name");
var barDim = ndx.dimension(function(d) {return d.name;});
var barGroup = barDim.group().reduceCount(function(d) {return +d.MYr;});
var group = barGroup;
var filteredGroup = (function (source_group) {return {
all:function() {
return source_group.top(11).filter(function(d) {
return d.key != "No value given";
});
}
};})(group);
bar.width(750).height(300)
.dimension(barDim)
.group(filteredGroup)
.renderHorizontalGridLines(true)
.gap(2)
.x(d3.scale.ordinal())
.xUnits(dc.units.ordinal)
.elasticY(true)
.elasticX(true)
.yAxisLabel("count")
.margins({top:10, left:60, right:10, bottom:130});
bar.on("renderlet",function(_chart){
_chart.selectAll("g.x text").style("text-anchor","end")
.attr('dx', '25').attr('dy', '12');
});
// Month pie chart:
var pieMonth = dc.pieChart("#pie_month");
var pieMonthDim = ndx.dimension(function(d) {return d.month;});
var pieMonthGroup = pieMonthDim.group().reduceSum(function(d) {return +d.count;});
pieMonth.width(200).height(200)
.dimension(pieMonthDim)
.group(pieMonthGroup)
.renderLabel(true)
.cy(80)
.externalRadiusPadding(20)
.innerRadius(0);
// Year pie chart:
var pieYear = dc.pieChart("#pie_Year");
var pieYearDim = ndx.dimension(function(d) {return d.Yr;});
var pieYearGroup = pieYearDim.group().reduceSum(function(d) {return +d.count;});
pieYear.width(300).height(200)
.dimension(pieYearDim)
.group(pieYearGroup)
.legend(dc.legend().x(15).y(15).horizontal(0).itemHeight(13).gap(6).legendWidth(100).itemWidth(100))
.renderLabel(false)
.cy(80)
.cx(200)
.externalRadiusPadding(20)
.innerRadius(0);
dc.renderAll(); // render graphs<link href="https://github.com/dc-js/dc.js/blob/develop/dc.css" rel="stylesheet"/>
<script src="https://github.com/square/crossfilter/blob/master/crossfilter.js"></script>
<script src="https://github.com/crossfilter/reductio/blob/master/reductio.js"></script>
<script src="https://github.com/dc-js/dc.js"></script>
<head>
<style>
#bar_name {
margin-top: 0em; margin-bottom: 1em;
margin-left: 0.5em; margin-right: 2em;
}
#pie_month {
margin-top: 0em; margin-bottom: 1em;
margin-left: 1em; margin-right: 2em;
}
#pie_Year {
margin-top: 0em; margin-bottom: 1em;
margin-left: 0em; margin-right: 2em;
}
</style>
<div id="bar_name"><h3><center>Top 10 (total)</center></h3></div>
<div id="pie_month"><h3><center>Month</center></h3></div>
<div id="pie_Year"><h3><center>Year</center></h3></div>
</head>
<body>
<style>
body {
padding: 10px;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.9/d3.min.js" type="javascript"></script>
</body>Вот образ приборной панели с данными выборки: dashboard with sample data
Я использую исходные сценарии постоянного тока. css, crossfilter.js, reductio.min.js, d3.v3.js и dc.js. Я не мог заставить фрагмент кода работать. Я считаю, что это связано с вытягиванием внешних файлов.