AngularJs nvD3 LineChart width yAxisの代わりに異なる値のリスト

Question

yAsisの値ではなく、LineChartのツールチップで異なる値を取得しようとしています。バックグラウンドでは、yAxisの '100T'のような短いバージョンで100,000を超える大きな数値を表示します。ツールチップを開くと、yAxisの短縮値ではなく、このドットからの正しい値を表示することをお勧めします。

スクリーンショット：

それはこれを実現することは可能ですか？ よろしく ティムは

Answer 1

だから、これは私のソリューションです：

chart.interactiveLayer: { 
tooltip: { 
    contentGenerator: function(d) { 
     var html = '<div class="ods-tooltip-content">'; 
     html += '<h4 style="">' + d.value + '</h4>'; 
     d.series.forEach(function(elem){ 
      html += '<div class="ods-tooltip-row">'; 
       html += '<div class="ods-tooltip-colorlabel" style="background-color: ' + elem.color + '"></div>' 
       html += '<div class="ods-tooltip-key">' + elem.key + '</div>'; 
       html += '<div class="ods-tooltip-value">' + DE.numberFormat("01,.2f")(elem.value) + '</div>'; 
      html += '</div>'; 
     }); 
     html += '</div>'; 
     return html; 

     // return d.series[0].key + ' ' + d.series[0].value; 




    } 
} 

}

そして、これは、これらの例のためのCSSです：

#widget .ods-tooltip-content { 
 
\t padding: 0 10px 15px 10px; 
 
} 
 

 
#widget .ods-tooltip-content h4 { 
 
\t text-align: left; 
 
} 
 

 
#widget .ods-tooltip-content .ods-tooltip-row { 
 
\t margin: 0 0 5px 0; 
 
} 
 

 
#widget .ods-tooltip-content .ods-tooltip-row:last-child { 
 
\t margin: 0; 
 
} 
 

 
#widget .ods-tooltip-content .ods-tooltip-row > div { 
 
\t display: inline-block; 
 
\t box-sizing: border-box; 
 
\t vertical-align: middle; 
 
\t line-height: 17px; 
 
} 
 

 
#widget .ods-tooltip-content .ods-tooltip-row .ods-tooltip-colorlabel { 
 
\t border: 1px solid #333; 
 
\t width: 15px; 
 
\t height: 15px; 
 
} 
 

 
#widget .ods-tooltip-content .ods-tooltip-row .ods-tooltip-key, 
 
#widget .ods-tooltip-content .ods-tooltip-row .ods-tooltip-value { 
 
\t margin: 0 0 0 10px; 
 
} 
 

 
#widget .ods-tooltip-content .ods-tooltip-row .ods-tooltip-value { 
 
\t font-weight: bold; 
 
}