Сделайте диаграмму кликабельной при размещении под другим SVG <View> - PullRequest
Новая
       39

Сделайте диаграмму кликабельной при размещении под другим SVG <View>

0 голосов
/ 24 сентября 2018

У меня проблемы с работой SVG в React Native.У меня есть диаграмма, на которую можно нажимать и которая работает хорошо, затем мне нужно было поместить еще один SVG поверх диаграммы, чтобы нарисовать линию, которая представляла бы значение предельной оценки.Проблема, с которой я сейчас сталкиваюсь, заключается в том, что я больше не могу нажимать на график, так как поверх него расположен вид SVG.Я сделал цвет фона SVG прозрачным, чтобы я мог хотя бы видеть диаграмму позади него, но я не знаю, как сделать его кликабельным снова.

Есть ли какая-нибудь работа, где я могу возможносделать диаграмму кликабельной в прозрачном виде, расположенном сверху?

Возможно, это глупый вопрос, но я довольно плохо знаком с реакцией и JS в целом, поэтому могу действительно использовать любую помощь.:)

Вот изображение графика:

Полярная диаграмма и круг SVG

А вот тот же SVG с непрозрачным фономэто, как вы можете видеть, охватывает почти диаграмму дыр.

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',
  },
 });'

Thisэто форма диаграммы 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>

1 Ответ

0 голосов
/ 24 сентября 2018

Либо:

  1. Переместите линию ограничения в график SVG, вместо того, чтобы отдельно размещать ее сверху, либо
  2. Установите pointer-events: none сверху SVG.Это заставит клики проходить прямо через него.
...