Question

这是一段代码，我可以正确地获取数据。但问题是我无法绘制图表。

请参阅此链接以查找我正在获取的图表图像

// This is where the composite chart code is starting.
CompositeChart: function (chartConfig, chartManager, meta) {

    var data = meta.data;
    var panelDetails = this.panelDetails(chartConfig.chartName);
    var chart = dc.compositeChart(panelDetails.id);
    var yAxisGroup = [];
    if (chartConfig.xDomainType == "Date" && !(data[0][meta.header[chartConfig.x]] instanceof Date)) {
        var dateFormater = d3.time.format("%Y-%m-%d");
        data.forEach(function (d, i) {
            d[meta.header[chartConfig.x]] = dateFormater.parse(d[meta.header[chartConfig.x]]);
        });
    }
    var xAxis = chartManager.cf.dimension(function (d) {
        var val = d[meta.header[chartConfig.x]];
        var result = (chartManager.dimValues[chartConfig.x]) ? chartManager.dimValues[chartConfig.x][val] : val;
        return result;
    });
    yAxisGroup = (chartConfig.y);
    var temp = yAxisGroup[0];
    var temp1 = yAxisGroup[1];

    var yDim1 = xAxis.group().reduceSum(function (d) {
        var val = d[meta.header[temp]];
        var result = (chartManager.dimValues[temp]) ? chartManager.dimValues[temp][val] : val;
        return result;
    });
    var yDim2 = xAxis.group().reduceSum(function (d) {
        var val = d[meta.header[temp1]];
        var result = (chartManager.dimValues[temp1]) ? chartManager.dimValues[temp1][val] : val;
        return result;
    });

    chart
        .width(panelDetails.width)
        .height(panelDetails.height)
        .margins({
            top: 35,
            right: 55,
            bottom: 30,
            left: 45
        })
        .renderHorizontalGridLines(true)
        .shareColors(true)
        .compose([
            dc.lineChart(chart)
            .dimension(xAxis)
            .dashStyle([2, 2])
            .group(yDim1),
            dc.lineChart(chart)
            .dimension(xAxis)
            .dashStyle([5, 5])
            .group(yDim2)
        ])
        .brushOn(false);


    this.addXDomain(chartConfig, meta, chart, xAxis);
    chart.render();
    this.chartStore[chartConfig.chartName] = chart;
},

当我调试数据时很好。我可以在控制台上打印它。但在Chart上没有运气我在分组Y轴数据时共享X轴数据。任何解决方案？

注意：控制台没有显示错误或异常。

任何人都能帮我找到父图吗？猜猜是问题，但我不确定我是否需要在compose函数中传递父聊天。

Fiddle Link

Answer 1

很难确定，但您可能会尝试将xaxis放在复合图表而不是每个组合图表上。

这是我建立的工作图表：

        var actuals = dc.barChart(compositeChart)
                    .gap(65)
                    .group(group)
                    .valueAccessor(function (d) {
                        return d.value.Actual;
                    });
            var budgets = dc.barChart(compositeChart)
                    .gap(65)
                    .group(group)
                    .valueAccessor(function (d) {
                        return d.value.Budget;
                    });

            compositeChart
                    .width(1000)
                    .height(300)
                    .margins({top: 20, right: 45, bottom: 40, left: 50})
                    .dimension(monthDimension)
                    .group(group)
                    .elasticY(true)
                    .x(d3.time.scale().domain(timeExtent))
                    .xUnits(d3.time.months)
                    .round(d3.time.month.round)
                    .renderHorizontalGridLines(true)
                    .compose([budgets, actuals])
                    .brushOn(true)
                    .title(function (d) {
                        return [
                            "Engagement: " + d.value.engagement,
                            "Amount:" + d.value.amount
                        ].join("\n");
                    })
                    .renderlet(function (chart) {
                        chart.selectAll("g._1").attr("transform", "translate(" + 20 + ", 0)");
                        chart.selectAll("g._0").attr("transform", "translate(" + 1 + ", 0)");
                    });

请注意，预算和实际图表未定义x或xUnits方法。这留给了复合图表。不确定这是否是必需的，但我想你需要为复合图表定义x。

无法渲染/绘制复合图表dc.js

1 个答案: