Question

在c3.js中我想更改时间序列图表中工具提示的标题，默认情况下，工具提示的标题是X系列的时间。

我为每个时间点都有一个唯一的文本标签，我将其作为数据系列存储在行中：[]，但我无法检索此唯一文本标签以显示在工具提示中。

我的数据是：

rows: [
        ['Date', 'Type', 'Pages', 'Words'],
        ['2013-01-01', 'A', 120, 300],
        ['2013-01-02', 'B', 160, 240],
        ['2013-01-03', 'C', 200, 290],
        ['2013-01-04', 'D', 160, 230],
        ['2013-01-05', 'E', 130, 300],
        ['2013-01-06', 'F', 220, 320]
],

目前工具提示的标题显示的是X系列日期，基本上是：

title = d[0].x;

我修改了工具提示：{}就像这样

title = d[0].value;

但工具提示的标题显示 null ，而不是显示与第二列对应的文字。

然后当我这样做时：

title = d[1].value;

屏幕可以显示与第3列对应的数字。

将文本字段显示为工具提示的标题是否存在问题？如果它可以默认显示日期，我不会这么认为。

请告诉我如何将第二列数据显示为工具提示的标题。第二列数据基本上描述了该日期发生的事件。

工具提示的完整代码：{}如下：

tooltip: {
    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;

          title = d[0].x ; //title of tooltip is X-axis label
          //title = d[0].name; //shows Type as the tooltip title
          //title = d[0].value; //shows null as the tooltip title
          //title = d[1].value; //shows Page number as the tooltip title

      for (i = 0; i < d.length; i++) {
          if (! (d[i] && (d[i].value || d[i].value === 0))) { continue; }


          if (! text) {
              text = "<table class='" + $$.CLASS.tooltip + "'>" + (title || title === 0 ? "<tr><th colspan='2'>" + title + "</th></tr>" : ""); //for the tooltip title
          }

          name = nameFormat(d[i].name); //for the columns data
          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>";
  }        
}, //tooltip

c3js更改时间序列图表的工具提示标题

0 个答案: