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工具提示标题中的总计数

1 个答案: