DC.js复合图表在应用过滤器时不更新 [英] DC.js composite chart not updating when filter is applied

问题描述

我使用DC.js和crossfilter。我试图使用复合图表来容纳条形图和折线图。但是，当我对数据应用过滤器时，条和线不更新。如果我有图表作为独立的条/线图，他们确实更新正确。

I am working with DC.js and crossfilter. I am trying to use a composite chart to house a bar chart and a line chart. However, when I apply a filter to the data, the bars and line don't update. If I have the charts as standalone bar/line charts, they do update properly.

以下是图表属性

复合图表

var chartScorecardComposite = dc.compositeChart("#regionMarketChart")
        .width(1002)
        .height(300)
        .margins({top: 30, right: 50, bottom: 50, left: 40})
        .dimension(chartIssuedJobsCountDim)
        .yAxisLabel("Issued on Time %")
        .rightYAxisLabel("Jobs Issued")
        .shareTitle(false)
        .x(d3.time.scale().domain([minDate, maxDate]))
        .y(d3.scale.linear().domain([0, 120]))
        .xUnits(d3.time.months)
        .compose([
            dc.barChart(chartScorecardComposite)
                .dimension(chartIssuedJobsCountDim)
                .group(chartIssuedJobsCountGroup)
                .valueAccessor(function (d) {
                    return d.value.jobCount;
                })
                .title(function(d) {
                    return (d.key.getMonth() + 1) + "/" + d.key.getFullYear()
                    + "\n# of Jobs: "
                    + d.value.jobCount;
                })
                .renderTitle(true)
                .centerBar(true)
                .gap(5)
                .useRightYAxis(true)
                .colors(["#79BAEC"]),
            dc.lineChart(chartScorecardComposite)
                .dimension(chartIssuedJobsCountDim)
                .group(chartIssuedOnTimeGroup)
                .valueAccessor(function (d) {
                    return d.value.onTimePercent;
                })
                .title(function(d) {
                    return (d.key.getMonth() + 1) + "/" + d.key.getFullYear()
                    + "\n% of Jobs Issued on Time: "
                    + d.value.onTimePercent + "%";
                })
                .renderTitle(true)
                .colors(["#808080"])
        ])
        .elasticY(true)
        .renderHorizontalGridLines(true)
        .brushOn(false)
        .renderlet(function (chart) { // Rotate the x-axis labels 45 degrees
            chart.selectAll("g.x text")
              .attr('dx', '-25')
              .attr('dy', '7')
              .attr('transform', "rotate(-45)");
        })
        .xAxis().ticks(d3.time.months).tickFormat(function(d) {
            return (d.getMonth() + 1) + "/" + d.getFullYear()
        })

条形图（在渲染compositeChart时注释掉）

Bar Chart (commented out when compositeChart is rendered)

var issuedJobsBarChart = dc.barChart("#regionMarketChart")
        .yAxisLabel("Jobs Issued")
        .dimension(chartIssuedJobsCountDim)
        .group(chartIssuedJobsCountGroup)
        .valueAccessor(function (d) {
            return d.value.jobCount;
        })
        .title(function(d) {
            return (d.key.getMonth() + 1) + "/" + d.key.getFullYear()
            + "\n# of Jobs: "
            + d.value.jobCount;
        })
        .renderTitle(true)
        .elasticY(true)
        .elasticX(true)
        .centerBar(true)
        .gap(5)
        .brushOn(false)
        .x(d3.time.scale().domain([minDate, maxDate]))
        .xUnits(d3.time.months)
        .xAxis().tickFormat(function(d) {
            return (d.getMonth() + 1) + "/" + d.getFullYear()
        })

折线图（在呈现compositeChart时注释掉）

Line Chart (commented out when compositeChart is rendered)

var issuedOnTimeLineChart = dc.lineChart(chartScorecardComposite)
        .width(800)
        .height(250)
        .margins({top: 30, right: 25, bottom: 50, left: 40})
        .yAxisLabel("Issued on Time %")
        .renderHorizontalGridLines(true)
        .renderVerticalGridLines(true)
        .dimension(chartIssuedJobsCountDim)
        .group(chartIssuedOnTimeGroup)
        .valueAccessor(function (d) {
            return d.value.onTimePercent;
        })
        .brushOn(false)
        .y(d3.scale.linear().domain([0, 120]))
        .x(d3.time.scale().domain([minDate, maxDate]))
        .xUnits(d3.time.months)
        .xAxis().ticks(d3.time.months).tickFormat(function(d) {
            return (d.getMonth() + 1) + "/" + d.getFullYear()
        })

感谢您的帮助

推荐答案

var issuedOnTimeLineChart = dc.lineChart(chartScorecardComposite)
        .dimension(chartIssuedJobsCountDim)
        .group(chartIssuedOnTimeGroup)
        .valueAccessor(function (d) {
            return d.value.onTimePercent;
        })
        .colors(["#808080"])
        .brushOn(false)
        .y(d3.scale.linear().domain([0, 120]))
        .x(d3.time.scale().domain([minDate, maxDate]))

    var issuedJobsBarChart = dc.barChart(chartScorecardComposite)
        .dimension(chartIssuedJobsCountDim)
        .group(chartIssuedJobsCountGroup)
        .valueAccessor(function (d) {
            return d.value.jobCount;
        })
        .title(function(d) {
            return (d.key.getMonth() + 1) + "/" + d.key.getFullYear()
            + "\n# of Jobs: "
            + d.value.jobCount;
        })
        .renderTitle(true)
        .centerBar(true)
        .gap(5)
        .colors(["#79BAEC"])
        .brushOn(false)
        .useRightYAxis(true)
        .x(d3.time.scale().domain([minDate, maxDate]))
        .xUnits(d3.time.months)


    //Define the composite chart
    var chartScorecardComposite = dc.compositeChart("#regionMarketChart")
        .width(1002)
        .height(300)
        .margins({top: 30, right: 50, bottom: 50, left: 40})
        .dimension(chartIssuedJobsCountDim)
        .yAxisLabel("Issued on Time %")
        .rightYAxisLabel("Jobs Issued")
        .shareTitle(false)
        .x(d3.time.scale().domain([minDate, maxDate]))
        .y(d3.scale.linear().domain([0, 120]))
        .xUnits(d3.time.months)
        .compose([
            issuedJobsBarChart,
            issuedOnTimeLineChart
        ])
        .elasticY(true)
        .renderHorizontalGridLines(true)
        .brushOn(false)
        .renderlet(function (chart) { // Rotate the x-axis labels 45 degrees
            chart.selectAll("g.x text")
              .attr('dx', '-25')
              .attr('dy', '7')
              .attr('transform', "rotate(-45)");
        })
        .xAxis().ticks(d3.time.months).tickFormat(function(d) {
            return (d.getMonth() + 1) + "/" + d.getFullYear()
        })

这允许应用于维度的任何过滤器以正确呈现和更新

This allowed any filters that were applied to the dimension to render and update properly

这篇关于DC.js复合图表在应用过滤器时不更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！