antvis/G2

关于在图标上滑动十字显示问题 #3241

ruoru posted onGitHub

  • I have searched the issues of this repository and believe that this is not a duplicate.

Edit on CodeSandbox

Steps to reproduce

  1. 在走势图上横向滑动的时候十字 tooltip不显示十字
  2. 如何隐藏tooltip与走势线的空心交点
  3. 如何修改样式,tooltip与走势线的空心交点
Environment Info
g2 4.1.7
System -
Browser -

<!-- generated by antv-issue-helper. DO NOT REMOVE -->

如果代码打不开,可以看一下下面的,root更一下就可以了

import F2 from '@antv/f2';
import _ from 'lodash';

fetch('https://gw.alipayobjects.com/os/antfincdn/OVMtvjbnut/series-line.json')
  .then(res => res.json())
  .then(data => {
    const chart = new F2.Chart({
      id: 'root',
      pixelRatio: window.devicePixelRatio
    });
    chart.source(data);
    chart.scale('date', {
      type: 'timeCat',
      tickCount: 3
    });
    chart.scale('value', {
      tickCount: 5
    });
    chart.axis('date', {
      label: function label(text, index, total) {
        // 只显示每一年的第一天
        const textCfg = {};
        if (index === 0) {
          textCfg.textAlign = 'left';
        } else if (index === total - 1) {
          textCfg.textAlign = 'right';
        }
        return textCfg;
      }
    });
    chart.tooltip({
      custom: true, // 自定义 tooltip 内容框
      showXTip: true,
      showYTip: true,
      snap: true,
      crosshairsType: 'xy',
      crosshairsStyle: {
        lineDash: [2]
      },
      onChange: function onChange(obj) {
        const legend = chart.get('legendController').legends.top[0];
        const tooltipItems = obj.items;
        const legendItems = legend.items;
        const map = {};
        legendItems.forEach(function(item) {
          map[item.name] = _.clone(item);
        });
        tooltipItems.forEach(function(item) {
          const name = item.name;
          const value = item.value;
          if (map[name]) {
            map[name].value = value;
          }
        });
        legend.setItems(_.values(map));
      },
      onHide: function onHide() {
        const legend = chart.get('legendController').legends.top[0];
        legend.setItems(chart.getLegendItems().country);
      }
    });
    chart.line().position('date*value').color('type');
    chart.area().position('date*value').color('type');

    chart.render();
  });

Fund this Issue

$0.00
Funded

Pull requests