react-native - 放置在另一个 SVG 下时使图表可点击
问题描述
我在使用 React Native 中的一些 SVG 时遇到问题。我有一个可点击且运行良好的图表,然后我需要在图表顶部放置另一个 SVG 以绘制一条代表极限得分值的线。我现在面临的问题是我无法再单击图表,因为 SVG 的视图被放置在它的顶部。我将 SVG 的背景颜色设置为透明,这样我至少可以看到它后面的图表,但是,我不知道如何让它再次可点击。
是否有任何工作可以让我通过放置在顶部的透明视图使图表可点击?
这可能是一个愚蠢的问题,但总的来说,我对 react 和 JS 都很陌生,所以我真的可以使用任何类型的帮助。:)
这是图表的图片:
如您所见,这里的 Svg 具有非透明背景,几乎覆盖了孔图。
这是SVG代码:
export class NutritionChartSvg extends Component {
render() {
return (
<View style={styles.container} >
<Svg height={height * 0.5} width={width * 0.5} viewBox="0 0 100 100">
<Svg.Circle
id="circle"
cx="50"
cy="13"
r="40"
stroke="gray"
strokeWidth="0.6"
fill="none"
/>
<Text fill="black" fontSize="8" dy="-2">
<TextPath href="#circle" startOffset='181'>
100
</TextPath>
</Text>
</Svg>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignContent: 'center',
justifyContent: 'center' ,
position: 'absolute',
left: '25%',
height: 'auto',
width: 'auto',
},
});'
这是图表形式chartjs:
export const NutritionChart = (props) => {
return (
<Chart
chartConfiguration={
{
type: 'polarArea',
data: {
labels: ['Fiber', 'Protein', 'Healthy Oil', 'Good Energy', 'Immune
Defense'],
datasets: [
{
label: '# of Votes',
data: [
50,
140,
90,
120,
100,
],
backgroundColor: backgroundColor,
borderColor: borderColor,
borderWidth: datasets.border,
hoverBackgroundColor: hoverBackgroundColor,
},
],
},
options: {
layout: {
padding: {
top: options.layout.padding.top,
bottom: options.layout.padding.bottom,
}
},
legend: {
display: false,
fullWidth: false,
labels: {
fontSize: options.legend.labels.fontSize,
boxWidth: options.legend.labels.boxWidth,
padding: options.legend.labels.padding,
}
},
scale: {
display: false,
ticks: {
min:0,
max:200,
}
},
responsive: true,
maintainAspectRatio: false,
},
}
}
defaultFontSize={10}
/>
);
};
他们在一个视图中在一起:
<View style={styles.nutritionChart} key={3}>
<NutritionChart/>
<NutritionChartSvg/>
</View>
解决方案
任何一个:
- 将限制线移动到图表 SVG 中,而不是将其单独放在顶部,或者
- 设置
pointer-events: none
在顶部的 SVG。这将使点击直接通过它。
推荐阅读
- powerbi - 如何使用具有重复值的列以逐行方式与另一列进行比较并在新列中组合值?
- algorithm - 来自一组不相交的排序区间的中间元素
- pandas - Apache Zeppelin:通过浏览器将 DataFrame 从笔记本保存到 CSV 到本地驱动器
- maven - Infinispan 嵌入式
- sql - Postgres 中超出堆栈深度限制
- excel - 如何创建将公式名称与使用它们的单元格或程序相关联的交叉引用
- gem5 - 如何通过基准模拟计算高速缓存 SRAM 的带宽?
- c++ - 为什么我收到 curl 错误 55:尝试发送电子邮件时向对等方发送数据失败?
- java - Android 应用程序因“尝试在空对象引用上调用虚拟方法”而崩溃
- snowflake-cloud-data-platform - 如何计算字符串中的单词数