小编use*_*128的帖子

更改工具提示的样式 - 重新图表

我为使用 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)

哪个样式属性可以帮助我实现它?

css reactjs recharts

5
推荐指数
1
解决办法
1万
查看次数

无法禁用工具提示nvD3.js

我试图从离散条形图中禁用工具提示,这是最简单的事情.但它仍然不起作用.我试过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)

tooltip d3.js nvd3.js

4
推荐指数
1
解决办法
4188
查看次数

图表没有响应 -react-plotly.js

我已经使用 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)

reactjs plotly.js

4
推荐指数
1
解决办法
3043
查看次数

标签 统计

reactjs ×2

css ×1

d3.js ×1

nvd3.js ×1

plotly.js ×1

recharts ×1

tooltip ×1