React Native Victory Chart可点击栏

我建立一个图表，我希望能够点击一个酒吧，以显示一些信息时，点击，但即使我插入的胜利图页面设置的所有信息是不工作，有人能帮助我，这里是代码

<VictoryStack colorScale={['#533AED']}>
              {myWeekDataset &&
                myWeekDataset.map((data, i) => {
                  console.log(data)
                  return (
                    <VictoryBar
                    style={{data: {strokeWidth: 0}}}
                    cornerRadius={{
                      top: 10,
                      bottom: 10,
                    }}
                    events={
                      [
                        {
                          target: "data",
                          eventHandlers: {
                            onClick: () => {
                              return [{
                                target: "data",
                                mutation: (props) => {
                                  console.log('>>>>CLICKED', props)
                                  
                                }
                              }]
                            },
                          },
                        },
                      ]
                    }

                    data={data}
                    key={i}
                    />
                  );
                })}
            </VictoryStack>

字符串
这是数据

const myWeekDataset = [
    [
      {x: moment().subtract(7, 'days').format('ddd'), y: 8},
      {x: moment().subtract(6, 'days').format('ddd'), y: 10},
      {x: moment().subtract(5, 'days').format('ddd'), y: 6},
      {x: moment().subtract(4, 'days').format('ddd'), y: 7},
      {x: moment().subtract(3, 'days').format('ddd'), y: 4},
      {x: moment().subtract(2, 'days').format('ddd'), y: 8},
      {x: moment().subtract(1, 'days').format('ddd'), y: 9},
      
    ],
  ];

型
我做错了什么？

请考虑以下示例中的代码

import React from "react";
import { VictoryChart, VictoryBar, VictoryStack, VictoryTheme } from "victory";

const genRandomData = () => parseInt(Math.random() * 100);

const myWeekDataset = [
  [
    { x: "Wed", y: genRandomData() },
    { x: "Thu", y: genRandomData() },
    { x: "Fri", y: genRandomData() },
    { x: "Sat", y: genRandomData() },
    { x: "Sun", y: genRandomData() },
    { x: "Mon", y: genRandomData() },
    { x: "Tue", y: genRandomData() }
  ],
  [
    { x: "Wed", y: genRandomData() },
    { x: "Thu", y: genRandomData() },
    { x: "Fri", y: genRandomData() },
    { x: "Sat", y: genRandomData() },
    { x: "Sun", y: genRandomData() },
    { x: "Mon", y: genRandomData() },
    { x: "Tue", y: genRandomData() }
  ]
];

export default function App() {
  events = [
    {
      target: "data",
      childName: "DataSet-0",
      eventHandlers: {
        onClick: () => [
          {
            mutation: (props) => {
              console.log("Click on first stack");
            }
          }
        ]
      }
    },
    {
      target: "data",
      childName: "DataSet-1",
      eventHandlers: {
        onClick: () => [
          {
            mutation: (props) => {
              console.log("Click on second stack");
            }
          }
        ]
      }
    }
  ];

  return (
    <div className="App">
      <VictoryChart theme={VictoryTheme.material} domainPadding={{ y: 40 }}>
        <VictoryStack events={this.events}>
          {myWeekDataset.map((dataSet, idx) => (
            <VictoryBar key={idx} data={dataSet} name={`DataSet-${idx}`} />
          ))}
        </VictoryStack>
      </VictoryChart>
    </div>
  );
}

字符串
在这里，我将事件定义为一个单独的变量，以使事情更容易阅读。
此外，每个VictoryBar都有一个名为name的prop。这在events数组中用于针对不同的组件。
如果你编译并运行这段代码，当你点击条形图时，它会在控制台中打印不同的消息。
现在，让我们更详细地研究events数组。
events数组包含2个元素。每个元素都有属性-target和childName。
1.target-指定要将事件附加到图形的哪个部分。它可以是（条形图/线图/散点图）的 data 或 labels 或 parent
1.childName-它用于基于我们添加到 VictoryBar 的name属性来定位图表的元素。可以是字符串，字符串数组或'all'
因此，{ target: 'data', childName: 'DataSet-0' }将把我们的事件处理程序附加到所有VictoryBar上，name属性等于'DataSet-0'。
1.eventHandlers-包含不同的事件处理器。在示例中，我使用了onClick，但也可以使用onMouseOver和onMouseOut等其他事件。
每个事件处理程序返回一个对象数组。每个对象可以有键-

{
  target: '',
  childName: '',
  mutation: (props) => {},
}

型
target和childName用于指定触发事件时需要影响图表的哪个组件。
例如，当单击中的条形图时，可以使用

{
  target: 'label',
  childName: 'DataSet-0',
  mutation: (props) => ({ style: { ...props.style, color: 'orange' } }),
}

型
有关事件的更多信息，请查看Victory Pro中的“常用 prop ”页面或Events Guide

React Native Victory Chart可点击栏

1条答案

相关问题

热门标签

最新问答