堆积条形图没有以正确的方式出现

Question

我试图使用 C3js 从我从网络获取的 CSV 内容创建一个在我的 x 轴上带有时间序列刻度的堆叠条形图。下面是我要解析的 csv 内容的一部分。

Time Series,Category,Duration
8/4/12 12:00 AM,Post Processor,387
8/7/12 12:00 AM,Post Processor,407
8/9/12 12:00 AM,Post Processor,398
8/20/12 12:00 AM,Post Processor,327
8/24/12 12:00 AM,Post Processor,391
8/4/12 12:00 AM,Response Processing,517
8/7/12 12:00 AM,Response Processing,543
8/9/12 12:00 AM,Response Processing,532
8/20/12 12:00 AM,Response Processing,436
8/24/12 12:00 AM,Response Processing,522
8/28/12 12:00 AM,Response Processing,457
9/12/12 12:00 AM,Response Processing,471
9/14/12 12:00 AM,Response Processing,453
9/16/12 12:00 AM,Response Processing,510
8/4/12 12:00 AM,External Calls,1035
8/7/12 12:00 AM,External Calls,1087
8/9/12 12:00 AM,External Calls,1064
8/20/12 12:00 AM,External Calls,874
8/24/12 12:00 AM,External Calls,1044
8/28/12 12:00 AM,External Calls,915
9/12/12 12:00 AM,External Calls,944
8/4/12 12:00 AM,Internal Processing,1294
8/7/12 12:00 AM,Internal Processing,1359
8/9/12 12:00 AM,Internal Processing,1331
8/20/12 12:00 AM,Internal Processing,1093
8/24/12 12:00 AM,Internal Processing,1306

因此，必须将类别列分组并显示为值。因此，我不得不对内容进行一些手动处理。我能够以某种方式为此生成图表，但图表堆栈不正确并且它们重叠，我不确定为什么。我正在粘贴代码的图形生成部分。

var chart = c3.generate({
    bindto: '#chart',
    data: {
        x: 'x',
        xFormat: '%m/%d/%y %I:%M %p',
        columns: final_data,
        type: 'bar',
        groups: val
    },
    axis: {
        x: {
            type: 'timeseries',
            tick: {
                format: '%b %d',
                fit: true
            }
        }
    },
    zoom: {
        enabled: true
    }
});

其中变量 final_data 是一个数组的数组，其数据语义如下所示。进行此处理是为了让事情以正确的形式进行，以便 C3 可以理解。

[
   ['x', ..... comma separated date in csv ....],
   ['Post Processor', ..... values with post processor .....],
   ['Response Processing', ..... values with request processing .....],
   ['External Calls', .... values with external calls .....],
   ['Internal Processing', ..... values with internal processing....]
]

数组final_data是由一段很模糊的代码生成的。粘贴在下面。

var master_object = {
   count: 0,
   values: [],
   data: []
};

var isKeyPresent = function(key) {
   if(master_object.values.indexOf(key) == -1)
       master_object.values.push(key);

var trump = master_object.data;
var check, returnable;
trump.forEach(function loop(anElementInMaster, i) {
    if(anElementInMaster[0] == key) {
        check = 1;
        returnable =  i;
        loop.stop = true;
    }
});
if(check != 1)
       return -1;
   else
       return returnable;
};

var kyaToBhiFunction = function(csvEntryArray) {
   var index;
   var key = csvEntryArray[0];
   if((index = isKeyPresent(key)) >= 0) {
       master_object.data[index].push(csvEntryArray[1]);
   }
   else {
       master_object.data.push(csvEntryArray);
   }
};

var resetMasterObject = function() {
    master_object = {
        count: 0,
        values: [],
        data: []
    };
};

playerForTimeSeries_c3 = function(csvReport) {
    var csvReportArray = d3.csv.parseRows(csvReport).slice(1);
    var timeseries_array = [], val = [], values;
    var final_data;
    csvReportArray.forEach(function(entry) {
        timeseries_array.push(entry.shift());
        kyaToBhiFunction(entry);
    });

    timeseries_array.unshift('x');
    final_data = master_object.data;
    values = master_object.values;

    // graph generation code continues here
}

这是我得到的那种图表（未堆叠的条形图，错误的 x 轴）请帮我解决这个问题。

http://screencast.com/t/poax9WuIgv

Answer 1

您错误地构建了列对象。每个日期应该有每个组的条目。

你需要这样的东西

var csvReportArray = d3.csv.parseRows(csvReport).slice(1);

var final_data = [['x']];
var values = [];

csvReportArray.forEach(function (entry) {
    // date index
    var xIndex = final_data[0].indexOf(entry[0]);
    if (xIndex === -1) {
        final_data[0].push(entry[0]);
        xIndex = final_data[0].length - 1;
        // push in 0 for all the groups
        final_data.forEach(function (e, i) {
            // skip the x array
            if (i)
                e.push(0);
        })
    }

    var valueIndex = values.indexOf(entry[1])
    if (valueIndex === -1) {
        values.push(entry[1])
        valueIndex = values.length - 1;
        // insert a new value (group)
        final_data.push([entry[1]]);
        // fill it with 0s
        final_data[0].forEach(function (e, i) {
            // skip the label
            if (i)
                final_data[valueIndex + 1].push(0);
        })
    }

    final_data[valueIndex + 1][xIndex] = entry[2];
});

var val = [values];

因为您选择了一个时间序列，所以您的 x 数组将被解释为日期，并且它们将相应地间隔开，即 1 月 1 日距 1 月 5 日为 5，而 1 月 5 日距 1 月 6 日，即使这 3是 x 数组中的连续元素。

也就是说，您可以通过减小栏宽来避免栏重叠。但是，确切的值取决于图形的宽度以及 2 个柱的接近程度（这又取决于 x 值的接近程度）

您可以通过选项传入来设置条形宽度

bar: {
    width: 20
},
...

Fiddle - http://jsfiddle.net/7k2js964/

堆积条形图没有以正确的方式出现

Stacked bar graph not coming in a proper way

javascript

csv

arrays

c3