Javascript C3.js-堆叠条形图-我可以让值包含而不是彼此堆叠吗？

我正在使用C3.js库创建一个堆叠条形图（我当前的代码在底部的JSFIDLE中）。问题是默认情况下，列是。。。堆积如山。因为我需要创建具有最小值、平均值和最大值的列，所以我希望这些值彼此包含，而不是堆栈。例如，如果我的最小值为10，平均值为50，最大值为100，我希望杆的高度为100，而不是160。是否有任何内在的方式来支持这种行为

我当前的代码：

<div id="chart"></div>

<script>
    var chart = c3.generate({
        bindTo: '#chart',
        data: {
            columns: [
                ['min', 10, 25, 15],
                ['avg', 50, 33, 51],
                ['max', 100, 75, 200]
            ],
            type: 'bar',
            groups: [
                ['min', 'avg', 'max']
            ]
        }
    });
</script>

var图表=c3.0({
bindTo:'图表'，
数据：{
栏目：[
[min'，10,25,15]，
[avg'，50，33，51]，
['max'，100，75，200]
],
类型：'bar'，
小组：[
[‘最小’、‘平均’、‘最大’]
]
}
});

下面是一个包含我的代码的JSFIDLE：

---

我不知道有什么内置的东西会像你所描述的那样使这些条相互合并，但是一个并排的视图会有帮助吗？如果是，请删除分组

看

---

我不知道有什么内置的东西会像你描述的那样使这些条相互合并，但是一个并排的视图会有帮助吗？如果是，请删除分组

看

---

我不认为c3有一个“过量”的酒吧选项，但你可以按摩你的数据

基本上预先处理数据，所以max实际上是max-avg，avg实际上是avg-min

然后，工具提示例程将恢复正确的总数以显示给用户

如果您将数据传递到其他任何东西上，并且记住数据已被更改并将其还原（或保留副本），请务必小心

var数据=[
[min'，10,25,15]，
[avg'，50，33，51]，
['max'，100，75，200]
];
对于（var n=data.length-1；n>0；n--）{
对于（var m=1；m

我认为c3没有“过多”条选项，但你可以按摩你的数据

基本上预先处理数据，所以max实际上是max-avg，avg实际上是avg-min

然后，工具提示例程将恢复正确的总数以显示给用户

如果您将数据传递到其他任何东西上，并且记住数据已被更改并将其还原（或保留副本），请务必小心

var数据=[
[min'，10,25,15]，
[avg'，50，33，51]，
['max'，100，75，200]
];
对于（var n=data.length-1；n>0；n--）{
对于（var m=1；m

好的，我将此作为另一个答案添加，因为它完全不同，而且如果我更改了原始答案，评论将毫无意义

这一次我利用了错误。。。c3中发现的导致其他用户无意中获得您想要的效果的功能（bug？）

基本上，如果您以json的形式提供数据，那么如果您将每个数据作为一个单独的点提供，则可以获得您想要的效果 e、 g.这样做会在同一柱上过度堆放最小值和最大值，即使它们是要堆放的

        [{ "x-axis": "0",
            "min": 30
        },
        { "x-axis": "0",
            "max": 40
        }],

然而，这种方式将它们堆叠起来：

        [{ "x-axis": "0",
            "min": 30,
            "max": 40
        }],

因此，我们需要的是一个例程，将原始的基于列的数据转换为json对象，其中每个数据都单独打包：

var数据=[
[min'，10,25,15,12]，
[avg'，50,33,51,24]，
['max'，100,75,200,76]
];
var json=[]；
data.forEach（函数（基准）{
var系列=基准[0]；
对于（变量i=1；i        [{ "x-axis": "0",
            "min": 30
        },
        { "x-axis": "0",
            "max": 40
        }],

        [{ "x-axis": "0",
            "min": 30,
            "max": 40
        }],

var data = [
                ['min', 10, 25, 15, 12],
                ['avg', 50, 33, 51, 24],
                ['max', 100, 75, 200, 76]
            ];

var json = [];
data.forEach (function (datum) {
    var series = datum[0];
    for (var i = 1; i < datum.length; i++) {
    var jdatum = {"x-axis": i-1};
    jdatum[series] = datum[i];
    json.push (jdatum);
  }
});

var chart = c3.generate({
    data: {
        x: "x-axis",
        json:json,
        keys: {
           x: "x-axis",
           value: ["max", "avg", "min"]
        },
        groups: [
           ['max', 'avg', 'min']
        ],
        type: 'bar',
    },
     bar: {
        width: {
            ratio: 0.95
        }
     },
     axis: {
       x: {
         padding: {
           left: 0.5,
           right: 0.5,
         }
       }
     },
     tooltip: {
         grouped: true,
         contents: function (d, defaultTitleFormat, defaultValueFormat, color) {
             var data = this.api.data.shown().map (function(series) {
                var matchArr = series.values.filter (function (datum) {
                    return datum.value != undefined && datum.x === d[0].x;
                });
                matchArr[0].name = series.id;
                return matchArr[0];
             });

            return this.getTooltipContent(data, defaultTitleFormat, defaultValueFormat, color);
      }
     }
    });