C3js中的工具提示自定义

Question

以下是使用C3js库

创建的堆积条形图示例

http://c3js.org/samples/chart_bar_stacked.html

想要修改工具提示。

目前工具提示中有两列。想要在工具提示中显示一个额外的列。因此会有树列数据

Answer 1

根据您的实际需要，您可以做几件事 1.（我的优先）使用tooltip-contents 在这种情况下，您可以根据需要设计工具提示 使用内联匿名函数

d参数是数据数组，其中包含图表上此确切位置的所有数据点 示例：

tooltip: {
  contents: function (d, defaultTitleFormat, defaultValueFormat, color) {
    return ... // formatted html as you want
  }
}

1. 您可以创建自定义CSS并将其绑定到＆＃34; c3-tooltip-container＆＃34;类元素。

＆＃34; C3-工具提示名称 - ％myseriesname％＆＃34;例如，系列名称等的一个TR类，所以如果列是静态的，你可以创建一个：before /：after伪CSS类并在那里添加一些东西。

1. 您可以使用D3通过它的类（＆＃34; c3-tooltip＆＃34;）来查找工具提示元素，以便添加列 类似的东西：d3.select（＆＃34; c3-tooltip＆＃34;）。追加（你的专栏在这里）

但你必须运行这个.onrender会让它变慢