Question

我正在尝试使用时间序列数据在dc.js中创建一个系列图表。我想通过属性和person列来分割系列图表。该图应显示对应于＆＃39; attr_1＆＃39;和＆＃39; attr_2＆＃39;对于每个人来说，所有人都是＆＃39;和＆＃39; JANE，DOE＆＃39;。

如果我对属性进行总结，我会使用以下代码来完成绘图。我的问题是，如何修改此代码以生成我上面描述的情节？

数据：

 year_month |     person    |    attribute      |         value         
------------+-----------+--------------+-----------------+-----------------------
 2015-07-01 | ALL           | attr_1            | 16867.083333333333
 2015-07-01 | ALL           | attr_2            | 11488.583333333333
 2015-07-01 | JANE, DOE     | attr_1            | 23533
 2015-07-01 | JANE, DOE     | attr_2            | 16151
 2015-08-01 | ALL           | attr_1            | 16467.000000000000
 2015-08-01 | ALL           | attr_2            | 10557.458333333333
 2015-08-01 | JANE, DOE     | attr_1            | 23454
 2015-08-01 | JANE, DOE     | attr_2            | 14379
 2015-09-01 | ALL           | attr_1            | 16225.800000000000
 2015-09-01 | ALL           | attr_2            | 13024.080000000000
 2015-09-01 | JANE, DOE     | attr_1            | 23935
 2015-09-01 | JANE, DOE     | attr_2            | 19612

生活在$ .ajax函数调用中的代码：

var data = $.parseJSON(data);
var chart1 = dc.seriesChart("#chart1");
var ndx = crossfilter(data),
xDimension   = ndx.dimension(function(d) {return [+Date.parse(d.year_month), d.person, d.attribute];}),
yGroup       = xDimension.group().reduceSum(function(d) {return +d.value;});

function series_chart(chart) {
    chart
    .width(400)
    .height(300)
    .chart(function(c) { return dc.lineChart(c).interpolate('basis'); })
    .x(d3.time.scale().domain([new Date("7/01/2015"), new Date("6/01/2016")]))
    .brushOn(false)
    .yAxisLabel("Dummy Label")
    .xAxisLabel("Month")
    .seriesAccessor(function(d) {return "person: " + d.key[1];})
    .keyAccessor(function(d) {return +d.key[0];})
    .valueAccessor(function(d) {return +d.value[0];})
    .dimension(xDimension)
    .group(yGroup);
    return chart;
}

series_chart(chart1)
.brushOn(true);

chart1.renderlet(function (chart) {
        // rotate x-axis labels
        chart.selectAll('g.x text')
        .attr('transform', 'translate(-10,10) rotate(315)');
    });

dc.renderAll();

如何创建具有多个因素的dc.js系列图表

0 个答案: