c3.js - 如何使用 Keen.io 和 c3 以绝对值而不是百分比绘制 donut ？

Question

我正在使用 Keen.io(“版本”:“3.4.1”)JavaScript SDK 以及它们与 C3.js 的集成，通过使用以下代码生成圆环图。但是，我不想要百分比，而是绝对数字。即不是 25%，而是 7。

通过阅读文档和查看 examples (参见“var c3gauge”)和 example ，我认为您可以通过应用 chartOptions 来修改输出。这似乎不起作用。在这一点上，我觉得我正在做一些愚蠢的事情，我只是没有捕获。

如何在我的 donut 中显示绝对值，而不是百分比？

                        var c3donut = new Keen.Dataviz()
                            .library('c3')
                            .chartType('donut')
                            .el(document.getElementById(elem))
                            .title("Awesome Sauce")
                            .parseRawData(data)
                            .chartOptions({
                                donut: {
                                    label: {
                                        format: function (value) {
                                            console.log("I never fire, why?");
                                            return value;
                                        }
                                    }
                                }
                            })
                            .render();

Answer 1

这可以通过 keen-dataviz.js 实现图书馆。我在这里创建了一个工作示例:https://jsfiddle.net/bx9efr4h/1/

这是使它工作的部分代码:

  var chart = new Keen.Dataviz()
    .el('#chart')
    .type("donut")
    .chartOptions({
      donut: {
        label: {
          format: function(value) {
            return value;
          }
        }
      }
    })
    .prepare();

keen-js 的工作方式略有不同，因为 c3.js 不是它的默认 dataviz 库。这可能就是它无法按您预期的方式工作的原因。