c3.jsのx軸の値を取得してツールチップをカスタマイズしますか？

Question

私はc3の線図でツールチップを編集しようとしています。具体的には、chart.tooltip.format.value関数内の現在のx値にアクセスする必要があります。ただし、関数はx値を明示的に渡されません。 d[0].x：カスタムツールチップを作成するために、ツールチップのcontentsプロパティを使用することができ、そしてそこにあなたが経由でX値にアクセスすることができます

var chart = c3.generate({ 
    tooltip: { 
     format: { 
      value: function (value, ratio, id, index) { 
       return value; 
      } 
     } 
    }, 

    data: { 
     x: 'YEAR', 
     xFormat: '%Y', 
     url: myURL', 
    }, 
    axis: { 
     x: { 
      type: 'timeseries', 
      tick: { 
       format: '%Y' 
      } 
     }, 
    }, 

}); 

Answer 1

。

編集：日付の唯一の年の部分を取得するためにd[0].x.getFullYear()を使用（C3は内部JavaScriptのDateオブジェクトとして指定された年保存するので、それは時系列です）

は、ここで私はこの議論から撮影したコードですhttps://github.com/c3js/c3/issues/444、および修正：

function tooltip_contents(d, defaultTitleFormat, defaultValueFormat, color) { 
    var $$ = this, config = $$.config, CLASS = $$.CLASS, 
     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; 

    // You can access all of data like this: 
    //console.log($$.data.targets); 

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

     // to exclude 
     //if (d[i].name === 'data2') { continue; } 

     if (! text) { 
      title = 'MY TOOLTIP @ ' + d[0].x.getFullYear(); // SHOW X-VALUE, year only (given it is a time series) 
      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>";  
} 

var chart = c3.generate({ 
    data: { 
     x: 'year', 
     xFormat: '%Y', 
     columns: [ 
      ['year', '1970', '1975', '1980', '1985', '1990'], 
      ['data1', 100, 200, 150, 300, 200], 
      ['data2', 400, 500, 250, 700, 300], 
     ] 
    }, 
     axis: { 
     x: { 
      type: 'timeseries', 
      tick: { 
       format: '%Y' 
      } 
     }, 
    }, 

    tooltip: { 
     contents: tooltip_contents 
    } 
}); 

私のフィドル、現在のx値を示す：コードのhttp://jsfiddle.net/w7h385h3/5/