Skip to main content
 首页 » 编程设计

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

2024年02月20日7java哥

我正在处理时间线显示,并且我有想要在工具提示上显示的数据。目前它只显示每次的值。我找不到改变它的方法。下面的示例显示了如何更改值的格式,但没有显示显示的值

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 第 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 值不同的数据。

请您参考如下方法:

如果您使用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>"; 
      } 
  } 
});