New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

基础条形图当label过长 #345

Closed
huangchaofei opened this Issue Sep 26, 2018 · 5 comments

Comments

Projects
None yet
2 participants
@huangchaofei

huangchaofei commented Sep 26, 2018

1。我在使用基础条形图时,坐标轴的label过长 我对他进行了过滤,但是希望当hover的时候能展示出来,有这个Hover事件吗 我在文档上没有找到
label:function label(text,index,total){
const textCfg:any = {fontSize:13};
if(text.length > 5){
textCfg.text = text.slice(0,5)+'..'
}
return textCfg
}
2.使用填充面积图时 可以同一个图不同的区域设置不同的颜色吗
我本来想使用guide实现 但是并没有我想像的效果 - -
this.chart.guide().regionFilter({
start: ['13', 'min'],
end: ['24', 'max'],
color: '#ccc'
})
希望能解答一下 谢谢谢谢 刚开始使用

@simaQ

This comment has been minimized.

Contributor

simaQ commented Sep 26, 2018

  1. 对于第一种情况,你需要自己监听 canvas 上的事件,通过我们提供的接口获取当前 hover 到的数据,然后自己控制交互,详见 FAQ: https://antv.alipay.com/zh-cn/f2/3.x/tutorial/faq.html#_3.-%E6%80%8E%E4%B9%88%E8%B7%9F%E5%9B%BE%E8%A1%A8%E4%BA%A4%E4%BA%92

  2. 能提供完整可运行的代码吗?我看下为何不生效

@huangchaofei

This comment has been minimized.

huangchaofei commented Sep 26, 2018

https://codepen.io/anon/pen/jvgVob?editors=1010#anon-login
在这上面显示的有些问题
我想要的效果就是 前面一些区域和线条显示一种颜色
后面一些区域和线条显示另一种颜色
我在本地写的代码中 那些value值为0的区域不会生效

@huangchaofei

This comment has been minimized.

huangchaofei commented Sep 26, 2018

其实就是那些线条0 0

@simaQ

This comment has been minimized.

Contributor

simaQ commented Sep 26, 2018

恩,这应该是个BUG,我跟进一下

@simaQ simaQ self-assigned this Sep 26, 2018

@simaQ simaQ added the bug label Sep 26, 2018

@simaQ simaQ closed this in 3900565 Sep 26, 2018

@simaQ

This comment has been minimized.

Contributor

simaQ commented Sep 26, 2018

升级到 @antv/f2@3.2.3-beta.4 版本,解决了这个问题,不过需要说明的是,chart.area() 面积图默认是带有 0.1 的填充透明度的,所以在这是 regionFilter 的时候,建议在 style 中将 fillOpacity 设置为 1

image

 var data = [
        { time: "1", value: 0 },
        { time: "2", value: 0 },
        { time: "3", value: 0 },
        { time: "4", value: 0 },
        { time: "5", value: 0 },
        { time: "6", value: 85 },
        { time: "7", value: 73 },
        { time: "8", value: 68 },
        { time: "9", value: 92 },
        { time: "10", value: 0 },
        { time: "11", value: 0 },
        { time: "12", value: 0 },
        { time: "13", value: 0 },
        { time: "14", value: 111 },
        { time: "15", value: 309 },
        { time: "16", value: 206 }
      ];
      var chart = new F2.Chart({
        id: 'mountNode',
        pixelRatio: window.devicePixelRatio
      });

      chart.source(data);
      chart.tooltip(false)
      chart.axis('time', {
        label: function (text, index, total) {
          var textCfg = {};
          if (index === 0) {
            textCfg.textAlign = 'left';
          } else if (index === total - 1) {
            textCfg.textAlign = 'right';
          }
          return textCfg;
        }
      });
      chart.line()
        .position('time*value').shape('smooth');
      chart.area()
        .position('time*value')
        .shape('smooth')
        .color('red');
      chart.guide()
        .regionFilter({
          start: ['10', -2],
          end: ['max', 'max'],
          color: '#ccc',
          style: {
            // fill: '#ccc',
            lineWidth: 2,
            fillOpacity: 1
          }
        });
      chart.render();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment