2

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
4

0 に答える 0