基础条形图当label过长

[huangchaofei]

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]

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]

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

[huangchaofei]

其实就是那些线条0 0

[simaQ]

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

[simaQ]

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

 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();