条形图和折线图在 DC.js 中不交互

bar chart and line chart are not interacting in dc.js

本文关键字：交互 js DC 折线图 条形图      更新时间：2023-09-26

我想画一个条形图和折线图，两者都具有相同的维度和组。所以，我希望，当我刷折线图选择其中的时间范围时，条形图会更新。但是，这并没有发生。这是我的代码。任何帮助都会很大赞赏

<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/dc/1.7.0/dc.css"/>
<script src="http://cdnjs.cloudflare.com/ajax/libs/dc/1.7.0/dc.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.12/crossfilter.min.js" charset="utf-8"></script>
<div id="dc-freq-chart"  style="height: 600px;  width: 100%"/>
<div id="dc-time-chart"  style="height: 600px;  width: 100%"/>
<script type="text/javascript">
var freqChart = dc.barChart("#dc-freq-chart");
var timeChart = dc.lineChart("#dc-time-chart");
var controllerElement = document.querySelector('[ng-app=zeppelinWebApp]');
var scope = angular.element(controllerElement).scope().compiledScope;
var dateArray = scope.days;
var data = [];
for (var i =0; i < dateArray.length; i++)
{
   data[i] = JSON.parse(dateArray[i]) 
}
var dateFormat = d3.time.format('%d/%m/%Y');
data.forEach(function (d) {
    d.dd = dateFormat.parse(d.Date);
});

var ndx = crossfilter(data);
var dateDim = ndx.dimension(function(d){
    return d3.time.day(d.dd);
})
var flights = dateDim.group();
// freqChart (barchart) properties
freqChart
    .width(1000)
    .height(500)
    .margins({top: 20, left: 50, right: 10, bottom: 40})
    .dimension(dateDim)
    .transitionDuration(500)
    .group(flights)
    .gap(1)
    .brushOn(false)
    .title(function(d){
      return d.data.key
      + "'nNumber of Flights on this day: " + d.data.value;
      })
    .x(d3.time.scale().domain(d3.extent(data, function(d) { return d3.time.day(d.dd); })))     
    .elasticY(true)
    .elasticX(true)
    .xAxisLabel("Day")
    .yAxisLabel("Number of flights")
    .xUnits(d3.time.days)
    .xAxis().ticks(d3.time.days, 1);
// timechart (line chart) properties
timeChart
    .width(1000)
    .height(250)
    .margins({top: 10, right: 30, bottom: 30, left: 50})
    .dimension(dateDim)
    .group(flights)
    //.transitionDuration(500)
    .brushOn(true)
    .renderArea(true)
    .elasticY(true)
    .elasticX(true)
    .x(d3.time.scale().domain(d3.extent(data, function(d) { return d3.time.day(d.dd); })))     
    .xAxisLabel("Day")
    .yAxisLabel("Number of flights")
    .xAxis().ticks(d3.time.days, 1);
dc.renderAll();
</script>

是的。我使用了范围图功能，这很有帮助。谢谢。

相关文章：