Question

我尝试使用来自我从网络获取的CSV内容中的C3js在我的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月5日将是5，因为1月5日是1月5日，即使这3个是连续的x数组中的元素。

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

您可以通过选项

传入条形宽度来设置条形宽度

bar: {
    width: 20
},
...

小提琴 - http://jsfiddle.net/7k2js964/

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

1 个答案: