C3.js

Question

我正在使用 C3.js 库创建堆积条形图（我当前的代码在底部的 jsfiddle 中）。问题是默认情况下，列是......堆叠的。因为我需要创建包含最小值、平均值和最大值的列，所以我希望这些值能够相互包含，而不是堆叠。例如。如果我有 min = 10、average = 50 和 max = 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>

这是我的代码的 jsfiddle： https://jsfiddle.net/gguej6n0/

Answer 1

我不知道有什么 built-in 会像您描述的那样使条形图相互合并，但是 side-by-side 视图有帮助吗？如果是这样，请删除分组。

见https://jsfiddle.net/gguej6n0/1/

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

Answer 2

我认为 c3 没有 'overplot' bars 选项，但您可以修改数据...

基本上是事先对数据进行处理，所以max其实就是max - avg，avg其实就是avg - min

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

如果您将数据传递给其他任何东西并记住数据已更改并恢复它（或保留副本），请小心

https://jsfiddle.net/gguej6n0/5/

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

    for (var n = data.length-1; n > 0; n--) {
    for (var m = 1; m < data[n].length; m++) {
    data[n][m] -= data[n-1][m];
  }
}


var chart = c3.generate({
      bindTo: '#chart',
    data: {
        columns: data,
        type: 'bar',
        groups: [
            ['min', 'avg', 'max']
        ]
    },
    tooltip: {
      contents: function (d, defaultTitleFormat, defaultValueFormat, color) {
                var dc = d.map (function (dd) {
                    return {value: dd.value, x: dd.x, id: dd.id, name: dd.name, index: dd.index};
            })
                for (var n= 1; n < dc.length; n++) {
                    dc[n].value += dc[n-1].value;
            }
            return this.getTooltipContent(dc, defaultTitleFormat, defaultValueFormat, color);
      }
  }
});

Answer 3

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

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

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

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

然而，这种方式会堆叠它们：

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

所以我们需要的是一个将原始 column-based 数据转换为 json 对象的例程，其中每个数据都单独打包：

http://jsfiddle.net/gvn3y0q6/5/

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);
      }
     }
    });

这次隐藏一个系列不影响另一个系列。仍然需要一些工具提示 jiggery-pokery，否则当鼠标悬停在 'stacks' 之一上时，我们只会得到工具提示中报告的值之一。看起来数据包含很多空值点，这让我认为这是我在这里利用的某种错误..

所以请记住，这可能会在未来的某个时候得到修复（或者可能会被保留，如果有人指出它对做这种情节很有用的话）- 那么这似乎就是你想要的

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

C3.js - stacked bar chart - can I make values to contain instead of stack each other?

javascript