MichealWayne/FundCharts

react如何引入tooltips?

Closed this issue · 10 comments

FrankFan commented

你好，请问用 react 的形式引入 Line 组件 import {Line} from 'fundcharts/react'，

如何再引入 ToolTips 组件呢？

看文档只找到通过全局引入的方式可以： window.FundChartsToolTips.ArrowToolTip, // 引用ToolTip， 但是用react的形式不属于这种情况。

MichealWayne commented

你好，感谢你的反馈。v0.9.10版本（预计2021.09.28发布）之前的fundcharts/react还不支持FundChartsToolTips的直接使用。如果急用可接入tooltips源码并手动注册。
v0.9.10发布后也会在本issue下提供使用方式。

MichealWayne commented

v0.9.10以下版本使用ToolTips的步骤：
1.环境准备：React+Ts；
2.将toolTips源码（/toolTips/src/*，不包含types目录）拷入项目中，如/src/toolTips/*；
3.引用toolTips，如ArrowToolTip：
import {ArrowToolTip} from '@/toolTips/grid.tt';
4.注册组件的hover属性，如：
<Line options={...} hover={ArrowToolTip}>
综合代码demo：

import {Line} from 'fundcharts/react';
import {ArrowToolTip} from '@/toolTips/grid.tt';

function Demo () {
  return (
    <Line options={...} hover={ArrowToolTip}>
  )
}
MichealWayne commented

2021.09.28 21:38 npm v0.9.10发布，文档http://blog.michealwayne.cn/FundCharts/docs/guide/#%E4%BD%BF%E7%94%A8tooltips，React中引用如下：

import { Pie } from 'fundcharts/react';
import { PieCenterToolTip } from 'fundcharts/tooltips/grid';

export function Demo () {
  return (
  <Pie
    options={{
      datas: [0.1, 0.2, 0.3, 0.4],
      toolTip: {
        showTip(index) {
          return ['吃', '喝', '玩', '乐', '代码', '书'][index];
        },
      },
    }}
    hover={PieCenterToolTip}
  />
  )
}
FrankFan commented

@MichealWayne 不好意思， 我发现你的npm包 v0.9.10 这个版本有问题：里面的 'fundcharts/tooltips/grid'文件仍然是 0.9.9，导致无法引入 ArrowToolTip、PieCenterToolTip 等方法。

麻烦看一下是我的姿势不对还是需要您fix一下？

FrankFan commented

附npm信息：

➜  react-app git:(master) ✗ npm info fundcharts

fundcharts@0.9.10 | ISC | deps: none | versions: 11
lightweight canvas data visualization library. 1.x: line/bar/pie/radar/scatter/kline chart.
https://github.com/MichealWayne/FundCharts#readme

keywords: fundcharts, canvas, charts, web, weapp, nodejs

dist
.tarball: https://registry.npmjs.org/fundcharts/-/fundcharts-0.9.10.tgz
.shasum: 627b465aca7482536f19e4891d9d64da9d7c7824
.integrity: sha512-HsFc/t1QDNVf3Xb0xojFywQMMyN5RA+eruvxgdJQg6EZvREcrF3M3rQSfXY2xHxy/LkvYIhaDdpY+ro6/hUY/A==
.unpackedSize: 121.9 kB

maintainers:
- michealwayne <michealwayne@163.com>

dist-tags:
latest: 0.9.10

published a week ago by michealwayne <michealwayne@163.com>

这个包： .tarball: https://registry.npmjs.org/fundcharts/-/fundcharts-0.9.10.tgz

MichealWayne commented

@FrankFan ，fundcharts/tooltips/grid和fundcharts/tooltips/shape因为没有内容更新所以还是0.9.9的文件（注释里的版本后续会同步），包是正常的，请问主要调用方式是如何的呢？
（ArrowToolTip、BasicToolTip 、KlineToolTip 来自fundcharts/tooltips/grid，PieCenterToolTip 、PieLabelToolTip 、LabelsToolTip 来自fundcharts/tooltips/shape，文档上有误，将进行更新）

FrankFan commented

我的场景是PC上画折线图，主要是想使用BasicToolTip实现普通鼠标悬浮显示，移开不显示tooltip的效果。
已经使用echarts实现了需求，看到这个库size比较小打算用来尝试一下，这也是最吸引我的地方。

通过你刚才的提醒，已经正确引入了BasicToolTip，并且看到了基本的tooltip效果，but，遇到的问题是：

  1. 在PC上鼠标悬浮上去根本不触发hover事件（这个问题通过阅读文档发现需要增加events: ['mousemove']实现，花费了一些时间）

  2. 发现tooltip不跟着鼠标箭头移动，总是出现在鼠标悬停的右侧一端距离处：详细请看图：
    image

  3. 鼠标移走到line-chart外部，tooltip不消失

MichealWayne commented

@FrankFan 感谢反馈，以下对于遇到问题的回答：
1.PC需要手动注册事件：本项目最早是服务于移动端（web、小程序）和服务端，为了节约PC的判断和处理，减少了PC的环境判断及相关事件的注册动作。后续安排会根据情况考虑自动注册；
2.tooltip位置问题：这确实是个PC的bug，出现原因是未对PC图表距页面左侧有距离时的位置处理，将尽快完成修复；
3.tooltip不消失：也是早期移动端需求特性所致，会在后期增加配置项支持“cancel”类的处理。

FrankFan commented

感谢回复，期待早日修复，早日开源核心代码，如果有需要可以帮忙提供PR 😄

MichealWayne commented

好的，将在0.9.12版本（修复问题，完成折线图曲线等适配）开源，欢迎提供PR 😄

注：文档内容已更新（pc events设置，tooltip demo问题）