SvgChart doesn't renders scrollable legend properly in Android about react-native-echarts HOT 17 OPEN

我通过 将 react-native-skia 升级至 0.1.216 版本，并通过 自定义字体解决了中文乱码问题， 目前在 华为平板、oneplus、oppo 上测试没问题

from react-native-echarts.

Yes, we found this problem too, let me think about how to fix it.

from react-native-echarts.

There's no good way to fix it yet, in your scenario, with a temporary patch.

  // fix: https://github.com/react-native-svg/react-native-svg/issues/983
  if (Platform.OS === 'android' && attrs.clipPath && !attrs.clipRule) {
    const allChildrenIsLine = children?.every((child) => {
      const d = child.attrs.d?.toString() || '';
      return (
        child.tag === 'path' &&
        child.attrs.fill === 'none' &&
        d[d.length - 1] !== 'Z'
      );
    });
    if (allChildrenIsLine) {
      attrs.clipRule = 'nonzero';
    }
  }

Also skia has better performance when tested and is more recommended.

from react-native-echarts.

If there is no more suitable method, this patch will be adopted soon.

from react-native-echarts.

Also have this problem when the legend's orient is set to vertical?

  legend: {
    type: 'scroll',
    orient: 'vertical',
    right: 10,
    top: 20,
    bottom: 20,
    data: data.legendData
  },

from react-native-echarts.

Try commenting out this code to see if this is the effect here:
lib/module/svgChart.js

  // fix: https://github.com/react-native-svg/react-native-svg/issues/983
  if (attrs.clipPath && !attrs.clipRule && Platform.OS === 'android') {
    attrs.clipRule = 'nonzero';
  }

from react-native-echarts.

Hi @zhiqingchen,

1. Changing the orientation to vertical does show them vertically but there is no scrolling functionality then and it acquires a lot of space as well which is not adequate for our needs.
2. I tried out your suggestion and commented the code you specified. On commenting the code, the legend is shown properly at first. But the line graph disappears from the chart and once I press the arrow to scroll to the right, the legend disappears completely then and doesn't reappear at any stage.

from react-native-echarts.

Hi @zhiqingchen, the temporary patch that you suggested seems to work as expected. As you're now aware of the issue, are you planning to put this patch or a different permanent fix in the next release? Thanks :)

from react-native-echarts.

@iambool 1.2.2-alpha.3

from react-native-echarts.

我更换了用Skia来渲染,然后遇到中文乱码的问题,然后寻找中文乱码的解决方法,提示用SVG渲染或设置字体,然后我去设置字体,在安卓上感觉没效果呀

from react-native-echarts.

https://github.com/wuba/taro-playground/blob/main/src/pages/explore/charts/pages/bar/mixTimelineFinance.tsx

1. 尝试将依赖，升级到最新版
2. 可能有某些系统/机型不支持，未全面验证过

from react-native-echarts.

我设置了下全局的字体 ,现在使用的是Skia渲染, ios上一切正常,在安卓上好像不生效,还是乱码,但是使用SVG渲染就可以,我不知道我的代码哪里写的有问题 ,我还需要做哪些修改才可以呢 亲亲
{
series:[
{
type:'bar',
showBackground:false,
data: array.map((item) => item.count),
barWidth: 22,
axisTick: {
alignWithLabel: true
},
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#2378f7' },
{ offset: 0.7, color: '#2378f7' },
{ offset: 1, color: '#83bff6' }
]),
borderType:'dashed',
borderRadius: [2, 2, 0, 0]
},

              label:{
                show:true,
                fontSize:8
              }
            }
          ],
          tooltip: {
            trigger: 'axis',
            showDelay: 0, 
            show: true,
            axisPointer: {
              type: 'shadow',
              shadowStyle: {
                color: 'rgba(247, 54, 93, 0.04)',
                width: '1',
              },
            },
            backgroundColor: 'rgba(0,0,0,0.7)',
            formatter: function (params) {
              // onChange(params,array)
              return params[0].name + ': ' + params[0].value;
            },
            borderWidth: 0,
            extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0);',
            textStyle: {
              color: '#fff',
          
            }
          },
          yAxis: {
            type: 'value',
            show:false
          },
          xAxis: {
            type: 'category',
            data: array.map((item) => item.showTime),
            axisLine :{
              lineStyle:{
                color:'#888',
             
              }
            },
            nameLocation:'start',
            nameTextStyle:{
              color:'#888',
              fontSize:8,
             
            },
            axisTick:{
              show:false
            },
            axisLabel:{
              color:'#888',
              fontSize:8,
             
            }
          },
          textStyle:{
            fontFamily:'monospace'
          }

}

from react-native-echarts.

我用你提供的示例的代码,放到我的项目里允许也是乱码

from react-native-echarts.

Is there any fix available now?

from react-native-echarts.

@zhiqingchen Is that patch available now in 1.2.3?

from react-native-echarts.

@zhiqingchen Is that patch available now in 1.2.3?

no, it's not final solution.

from react-native-echarts.

我通过 将 react-native-skia 升级至 0.1.216 版本，并通过 自定义字体解决了中文乱码问题， 目前在 华为平板、oneplus、oppo 上测试没问题

@xSmile-art 你使用的是什么字体？

from react-native-echarts.