wuba
SvgChart doesn't renders scrollable legend properly in Android
We are using SvgChart renderer from the package imported like this:
import SvgChart, { SVGRenderer } from '@wuba/react-native-echarts/svgChart';
When we render a chart with a legend without adding the "type" to "scroll", it displays the legend fine. But if we add the scrolling attribute in the legend configuration of the chart, it doesn't displays the legend properly and just shows it half. And when we press on the right arrow to scroll, the legend becomes completely invisible. This issue is only seen in Android and it works perfectly fine in iOS with everything same. Also, one thing to note that SkiaChart renderer doesn't have this issue at all either in Android or iOS but cannot use that because of it's huge size and drastically increased build time.
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
},
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';
}
Hi @zhiqingchen,
- 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.
- 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.
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.
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 :)
https://github.com/wuba/taro-playground/blob/main/src/pages/explore/charts/pages/bar/mixTimelineFinance.tsx
- 尝试将依赖，升级到最新版
- 可能有某些系统/机型不支持，未全面验证过
我设置了下全局的字体 ,现在使用的是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'
}
}
@zhiqingchen Is that patch available now in 1.2.3?
no, it's not final solution.
我通过 将 react-native-skia 升级至 0.1.216 版本，并通过 自定义字体解决了中文乱码问题， 目前在 华为平板、oneplus、oppo 上测试没问题
我通过 将 react-native-skia 升级至 0.1.216 版本，并通过 自定义字体解决了中文乱码问题， 目前在 华为平板、oneplus、oppo 上测试没问题
@xSmile-art 你使用的是什么字体？
Hi, i'm using react-native-echarts 1.2.5 with react-native-svg 12.1.1
get exactly same issue, but my project unable to install Skia for replacing Svg. is there a solution for temporary fix ?
my chart is wrapped in Scrollview and and tooltip disturb when I starting touching the chart to see the tooltip it start little bit scrolling
my chart is wrapped in Scrollview and and tooltip disturb when I starting touching the chart to see the tooltip it start little bit scrolling
try use RNGH，https://wuba.github.io/react-native-echarts/docs/advanced-guides/use-rngh