gauge - c3 仪表图中的多个条形图

Question

我正在尝试使用类似于下图的 c3.js 创建堆叠仪表图，但在文档中找不到任何示例。这甚至可能吗？

Answer 1

C3.js 库似乎不允许使用此 atm，尽管如果您尝试将 2 个具有不同 id 的数据数组放入它们似乎将一个呈现在另一个之上 - 我想重构支持它并不难 - 问作者还是自己做（源代码可在 github 上找到）？

我设法通过一个可怕的黑客来实现它 - 但在图书馆支持它之前可能是值得的。

创建 2 个仪表图表，使其中一个 div 元素移动到与另一个重叠。同时，确保第二个仪表图略小。然后你必须决定隐藏 2 个标签中的哪一个。

这是一个html片段：

<div id="chart1"></div>
<div id="chart2" style="position: relative; top: -140px;"></div>

这是相应的javascript：

var chart = c3.generate({
    bindto: $("#chart1")[0],
    data: {
        columns: [
            ['data', 91],
            ['data', 90]
       ],
        type: 'gauge',
   },
   gauge: {
            width: 10
    },
    size: {
        height: 160
    }
});
var chart = c3.generate({
    bindto: $("#chart2")[0],
    data: {
        columns: [
            ['data', 11],
            ['data', 20]
       ],
        type: 'gauge',
   },
   gauge: {
            width: 20
    },
    size: {
        height: 140
    }
});