AngularJs nvD3 LineChart 宽度不同的值列表而不是 yAxis

Question

我试图在 LineChart 工具提示中获取不同的值，而不是 yAsis 中的值。背景是在缩短版本中显示大于 100.000 的大数字，例如 yAxis 上的“100T”。打开工具提示，建议从这个点看到正确的值，而不是从 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 {
	padding: 0 10px 15px 10px;
}

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

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

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

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

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

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

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