c3js 工具提示标题中的总计数

Question

我在 c3.js 中有以下代码来创建堆积条形图。

    x=['a','b','c'];
    var chart = c3.generate({
    data: {

    columns: [
        ['data1', -30, 200, 200],
        ['data2', 130, 100, -100],

    ],
    type: 'bar',
    groups: [
        ['data1', 'data2']
    ]
    },

    });

我想知道如何实现在工具提示标题中显示总计数的功能，已实现here

Answer 1

最简单的方法就是编写您自己的工具提示 HTML。您可以使用以下代码执行此操作。

var chart = c3.generate({
  .......
  tooltip: {
    contents: function (d, defaultTitleFormat, defaultValueFormat, color) {
      return ...... Your HTML as a string here .......
    }
  }
});

然后您需要将与您悬停的点具有相同索引的所有点的值相加，如下所示：

var sum = 0;
for (var i = 0; i < chart.data.targets.length; i++) {
  sum += chart.data.targets[i].values[d[0].index].value;
}

我已经创建了一个 fiddle，它给出了一个如何做的例子，并且应该做你需要的。执行此操作时要记住的重要一点是按照您想要的方式设置工具提示的样式，否则它会很平淡。我还将生成 HTML 的函数分离到另一个函数中以保持整洁。

c3js 工具提示标题中的总计数

Total Count in c3js tooltip title

bar-chart

c3.js

stacked-chart