我有一个包含 3 个图表的仪表板:一个条形图和 2 个饼图。饼图是“月”和“年”。条形图显示前 10 条数据。因此，如果我单击特定的月份和年份，条形图将更新以反射(reflect)前 10 个值(其计数在 y 轴上)。我希望能够从选择的选项中观看条形图更新(一段时间后)。
例如，我想查看 2015 年 1 月前 10 名...然后 2015 年 2 月前 10 名...然后 2015 年 3 月前 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
我使用源脚本 dc.css、crossfilter.js、reductio.min.js、d3.v3.js 和 dc.js。我无法让代码片段工作。我相信这与外部文件的拉取有关。
最佳答案
我将数据分解为我想要的部分，添加了一个重置数据的函数，然后为每组数据创建了 setTimeout 函数。
function resetData(ndx, dimensions) {
var barFilters = bar.filters();
var yearChartFilters = pieYear.filters();
var monthChartFilters = pieMonth.filters();
bar.filters(null);
pieYear.filter(null);
pieMonth.filters(null);
ndx.remove();
bar.filter([barFilters]);
pieYear.filter([yearChartFilters]);
pieMonth.filter([monthChartFilters]);
}
setTimeout(function() {
resetData(ndx, [barDim, pieMonthDim, pieYearDim]);
ndx.add(data2);
dc.redrawAll();
}, 5000); // 5 sec delay from rendering page
setTimeout(function() {
resetData(ndx, [barDim, pieMonthDim, pieYearDim]);
ndx.add(data3);
dc.redrawAll();
}, 15000); // 10 sec after change (15 after rendering page)
关于javascript - dc.js/如何在持续时间后自动更改条形图选定的值？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36408931/