我为使用 recharts 实现的图表创建了一个自定义工具提示。我想更改它的样式,但无法删除行之间的额外空白。我尝试更改行高、填充和边距来消除空间,但没有任何效果。
<div className="customTooltip">
<h2 className="tooltipLabel">{e.payload[0].payload.initiatorUsername}</h2>
<i className="tooltipTitle">{e.payload[0].payload.title}</i>
<div className="tooltipContent">
<p>Request startTime:</p>
<p>Approver name:</p>
<p>Approver Title</p>
<p>
Approved Time:{" "}
{moment.unix(e.payload[0].payload.time).format("MMM Do YYYY, h:mm:ss")}
</p>
</div>
</div>
Run Code Online (Sandbox Code Playgroud)
.recharts-tooltip-wrapper {
.customTooltip {
margin: 0;
line-height: 5px;
border: 1px solid #f5f5f5;
background-color: rgba(255, 255, 255, 255);
padding-bottom: 0%;
.tooltipTitle {
margin: -10px;
color: #666;
top:5px;
}
}
}
Run Code Online (Sandbox Code Playgroud)
哪个样式属性可以帮助我实现它?
我试图从离散条形图中禁用工具提示,这是最简单的事情.但它仍然不起作用.我试过chart.tooltip(false),但它给出了chart.tooltip函数未定义的控制台错误.因为我使用普通的nvD3而不是angular-nvD3指令,如果我使用交互式(假),它会被忽略.
我确实用bower安装了nvD3,这就是它采取这种方式的原因.我错过了工具提示所需的任何库吗?请帮忙.
link(rel="stylesheet", href="_assets/bower/nvd3/build/nv.d3.css")
script(src="_assets/bower/d3/d3.js")
script(src="_assets/bower/nvd3/build/nv.d3.js")
Run Code Online (Sandbox Code Playgroud) 我已经使用 react-plotly.js 实现了一个散点图,我希望图表在页面布局更改时重新调整大小。但目前,图表的布局不会自行改变。如果我在图表上明确执行某些强制图表重绘的功能,那么只有图表宽度会发生变化。
我应用了 useResizeHandler 属性并将 autosize 设置为 true。但这也没有任何区别。
<Plot
useResizeHandler
style={{ width: '100%' }}
data={chartData}
onClick={(data) => this.handlePlotClick(data)}
type={'scatter'}
layout={this.layout} />
const layout = {
autosize: true,
dragmode: true,
margin: {
l: 5,
r: 5,
t: 10,
b: 10,
pad: 0,
autoexpand: true
},
hovermode: 'closest',
hoverlabel: {
bgcolor: 'rgba(0,0,0,1)',
bordercolor: 'rgba(200,200,200,1)'
},
height: '650',
yaxis: {
visible: false
},
xaxis: {
autorange: false,
showline: true,
fixedrange: false, // true disables range selection on main graph
rangeslider: {
range: …
Run Code Online (Sandbox Code Playgroud)