NVD3.js yAxis 和工具提示的精度不同
NVD3.js yAxis and tooltip different percision
我正在使用NVD3.js来显示多折线图。
我希望 yAxis 显示为 2 个十进制数字
编辑的答案
var chart;
nv.addGraph(function () {
chart = nv.models.lineChart()
.options({
margin: { left: 140, bottom: 50 },
x: function (d, i) {
return i;
},
showXAxis: true,
showYAxis: true,
transitionDuration: 250,
tooltips: true,
tooltipContent: function (key, x, y, e, graph) {
return '<h3>' + key + '</h3>' +
'<p>' + e.point.y + ' at ' + x + '</p>'
}
});
// chart sub-models (ie. xAxis, yAxis, etc) when accessed directly, return themselves, not the parent chart, so need to chain separately
chart.xAxis
.axisLabel("Maturity")
.tickFormat(function(d) { return pivotedData[0].values[d].x; });
chart.yAxis
.axisLabel('Model Spread').tickFormat(d3.format(',.2f'));
d3.select('#chart1 svg')
.datum(pivotedData)
.call(chart);
//TODO: Figure out a good way to do this automatically
nv.utils.windowResize(chart.update);
chart.dispatch.on('stateChange', function (e) { nv.log('New State:', JSON.stringify(e)); });
return chart;
});
但是在工具提示的行中,我想显示到小数点后 12 位。
这可能吗?
可以设置调用的函数,以通过图表对象的.tooltipContent
设置工具提示内容的格式。默认函数定义如下。
tooltip = function(key, x, y, e, graph) {
return '<h3>' + key + '</h3>' +
'<p>' + y + ' at ' + x + '</p>'
}
您可以根据自己的喜好在其中格式化y
的值。请注意,y
定义为
yAxis.tickFormat()(lines.y()(e.point, e.pointIndex))
这意味着轴的刻度格式会影响它,因此为了在那里实现更高的精度,您需要直接获取值 - lines
可以通过chart.lines
访问。
在 nvd3 源中,它们有这样的行(折线图):
interactiveLayer.dispatch.on('elementMousemove', function(e) {
...
var xValue = xAxis.tickFormat()(chart.x()(singlePoint,pointIndex));
interactiveLayer.tooltip
.position({left: pointXLocation + margin.left, top: e.mouseY + margin.top})
...
.valueFormatter(function(d,i) {
return yAxis.tickFormat()(d);
})
.data(
{
value: xValue,
series: allData
}
)();
...
}
因此,如果你想覆盖像tooltip.contentGenerator这样的东西,你就会被它给你的数据所困。 我认为做到这一点的一个好方法是为工具提示 x 格式化程序或其他东西提供一个设置器,然后它将在轴格式化程序上使用它。 或者只是发送原始数据以及值和系列。
我的用例是我在图表上显示 7 天的时间刻度,我只勾选每天的开始。 但是,在工具提示上,我想提供该数据的更详细视图。
这是我特定于指南工具提示的拉取请求
https://github.com/novus/nvd3/pull/444
调用:chart.tooltipXAxisFormatter(d3.time.format(toolTipFormat));将设置它。
相关文章:
- d3.js Chord图的动态工具提示
- Graphiti中是否有任何工具提示功能
- "工具提示"jQuery插件坏了
- 单元格的工具提示或标题不显示超过2000个字符
- d3.js用按钮更新条形图工具提示
- 使Intro.js工具提示响应
- 画布中绘制的矩形区域的弹出工具提示
- 使用CSS/JavaScript更改剑道图工具提示文本颜色
- 禁用NVD3 multiBarHorizontalChart中0值的工具提示
- 如何更改已显示的工具提示
- 如何访问高图表工具提示中的任何特定数据
- 如何在jQuery点击函数中添加并显示引导工具提示
- 我可以't使用jQuery更改工具提示引导程序的位置
- 语义UI中格式化的工具提示
- 柱状图上的Highcharts工具提示
- 引导工具提示用法,在搜索字段中
- 将工具提示添加到d3散点图中
- Highcharts工具提示不显示corrosconding文本值,而是显示'未定义'
- 工具提示在带有两个图表的d3.js中消失
- NVD3.js yAxis 和工具提示的精度不同