如何更改c3js中的工具提示内容

Question

我正在制作时间轴显示,我想要在工具提示中显示数据.目前它只显示每次的值.我无法找到改变它的方法.下面的示例显示了如何更改值的格式,但不显示更改的值

var chart = c3.generate({
data: {
    columns: [
        ['data1', 30000, 20000, 10000, 40000, 15000, 250000],
        ['data2', 100, 200, 100, 40, 150, 250]
    ],
    axes: {
        data2: 'y2'
    }
},
axis : {
    y : {
        tick: {
            format: d3.format("s")
        }
    },
    y2: {
        show: true,
        tick: {
            format: d3.format("$")
        }
    }
},
tooltip: {
    format: {
        title: function (d) { return 'Data ' + d; },
        value: function (value, ratio, id) {
            var format = id === 'data1' ? d3.format(',') : d3.format('$');
            return format(value);
        }
           //value: d3.format(',') // apply this format to both y and y2
    }
}
});

它来自http://c3js.org/samples/tooltip_format.html 他们承认没有内容编辑的例子,但我在参考或论坛中找不到任何内容,但建议更改代码(它在这里:https://github.com/masayuki0812/c3/blob/master/c3.js in line 300)及以下:

__tooltip_contents = getConfig(['tooltip', 'contents'], function (d, defaultTitleFormat, defaultValueFormat, color) {
        var titleFormat = __tooltip_format_title ? __tooltip_format_title : defaultTitleFormat,
            nameFormat = __tooltip_format_name ? __tooltip_format_name : function (name) { return name; },
            valueFormat = __tooltip_format_value ? __tooltip_format_value : defaultValueFormat,
            text, i, title, value, name, bgcolor;
        for (i = 0; i < d.length; i++) {
            if (! (d[i] && (d[i].value || d[i].value === 0))) { continue; }

            if (! text) {
                title = titleFormat ? titleFormat(d[i].x) : d[i].x;
                text = "<table class='" + CLASS.tooltip + "'>" + (title || title === 0 ? "<tr><th colspan='2'>" + title + "</th></tr>" : "");
            }

            name = nameFormat(d[i].name);
            value = valueFormat(d[i].value, d[i].ratio, d[i].id, d[i].index);
            bgcolor = levelColor ? levelColor(d[i].value) : color(d[i].id);

            text += "<tr class='" + CLASS.tooltipName + "-" + d[i].id + "'>";
            text += "<td class='name'><span style='background-color:" + bgcolor + "'></span>" + name + "</td>";
            text += "<td class='value'>" + value + "</td>";
            text += "</tr>";
        }
        return text + "</table>";
    })

有没有人试图这样做？开发了一些促进流程的功能？有关于如何正确做到这一点的任何提示？我不知道如何改变他们的代码,我可以使用不同于函数获得的d值的更多数据或数据.

Answer 1

如果您使用https://github.com/masayuki0812/c3/blob/master/src/tooltip.js#L27中的函数getTooltipContent 并将其添加到图表声明中,在tooltip.contents中,您将拥有相同的工具提示内容即默认值.

您可以对此代码进行更改并根据需要进行自定义.有一个细节,因为CLASS在目前的范围没有定义,但它的部分图表对象,我取代CLASS了$$.CLASS,也许你甚至不需要在你的代码此对象.

var chart = c3.generate({
  /*...*/
  tooltip: {
      format: {
        /*...*/
      },
      contents: function (d, defaultTitleFormat, defaultValueFormat, color) {
          var $$ = this, config = $$.config,
              titleFormat = config.tooltip_format_title || defaultTitleFormat,
              nameFormat = config.tooltip_format_name || function (name) { return name; },
              valueFormat = config.tooltip_format_value || defaultValueFormat,
              text, i, title, value, name, bgcolor;
          for (i = 0; i < d.length; i++) {
              if (! (d[i] && (d[i].value || d[i].value === 0))) { continue; }

              if (! text) {
                  title = titleFormat ? titleFormat(d[i].x) : d[i].x;
                  text = "<table class='" + $$.CLASS.tooltip + "'>" + (title || title === 0 ? "<tr><th colspan='2'>" + title + "</th></tr>" : "");
              }

              name = nameFormat(d[i].name);
              value = valueFormat(d[i].value, d[i].ratio, d[i].id, d[i].index);
              bgcolor = $$.levelColor ? $$.levelColor(d[i].value) : color(d[i].id);

              text += "<tr class='" + $$.CLASS.tooltipName + "-" + d[i].id + "'>";
              text += "<td class='name'><span style='background-color:" + bgcolor + "'></span>" + name + "</td>";
              text += "<td class='value'>" + value + "</td>";
              text += "</tr>";
          }
          return text + "</table>";
      }
  }
});

Answer 2

如果要根据数据值控制工具提示渲染并使用默认渲染,可以使用以下内容:

tooltip: {
    contents: function (d, defaultTitleFormat, defaultValueFormat, color) {
        if (d[1].value > 0) {
            // Use default rendering
            return this.getTooltipContent(d, defaultTitleFormat, defaultValueFormat, color);
        } else {
            return '<div>Show what you want</div>';
        }
    },
    format: {
        /**/
    }
}