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;
ただし、ツールチップのタイトルには、2 番目の列に対応するテキストを表示する代わりにnullが表示されます。
次に、これを行うと:
title = d[1].value;
画面には、3 番目の列に対応する番号が表示されます。
ツールチップのタイトルとしてテキスト フィールドを表示する際に問題はありますか? デフォルトで日付を表示できるのであれば、そうは思いません。
2列目のデータをツールチップのタイトルとして表示する方法を教えてください。2 列目のデータは、基本的にその日付に発生したイベントを表します。
ツールチップの完全なコード: {} は次のとおりです。
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