标签: victory-charts

我正在使用React 胜利库制作图表，我正在使用 TypeScript。我已将@types/victory包添加到我的项目中，但不幸的是，它缺少一些我需要的关键定义。对于某些接口，它缺少几个属性，因此（使用此答案），我创建了一个自定义文件以将这些属性添加到接口。

但是，现在我有一个问题：为事件定义的接口有一个名为eventHandlersdefined的属性，但它又缺少一个重要的定义，它是如何定义的：

export interface EventPropTypeInterface<TTarget, TEventKey> {
  /* other properties */,
  eventHandlers: {
    [key: string]:
      { (event: React.SyntheticEvent<any>): EventCallbackInterface<TTarget, TEventKey> } |
      { (event: React.SyntheticEvent<any>): EventCallbackInterface<TTarget, TEventKey>[] }
  }

但是，问题是该函数应该允许接受第二个参数，例如（我不确定第二个参数的类型，所以我有any）：

{ (event: React.SyntheticEvent<any>, dataPoint: any): EventCallbackInterface<TTarget, TEventKey> }

所以，我试图在我自己的定义中包含这个属性：

declare module "victory" {
  export interface EventPropTypeInterface<TTarget, TEventKey> {
  eventHandlers: {
    [key: string]:
      { (event: React.SyntheticEvent<any>, dataPoint: any): EventCallbackInterface<TTarget, TEventKey> } |
      { (event: React.SyntheticEvent<any>, dataPoint: any): …

我正在使用胜利本机并有一个带有 VictoryLine 和 VictoryArea 的 VictoryChart 作为孩子，并且想要删除图表的轴。有没有办法通过道具访问它？可能颜色可以设置为透明。

这是一些代码：

 <VictoryChart
  containerComponent={
    <VictoryContainer />
  }
 > 
  <VictoryArea
    interpolation={interpolation}
    data={this.state.data}
  />
  <VictoryLine
    interpolation={interpolation}
    data={this.state.data}
  />
</VictoryChart>

我正在刷卡内渲染 VictoryChart，并且刷卡很慢。我怀疑原因是图表渲染缓慢（当替换为静态图像时，滑动速度很快）。

阅读各种关于 Victory 和 Victory Native 性能的讨论，似乎渲染缓慢的原因之一是动画。

我没有在图表中做任何动画。

除了我在下面的代码中所做的之外，我是否必须明确禁用动画？

任何其他建议如何提高此图表的渲染性能？（我知道对值进行预先排序可能会有所帮助。还有什么别的吗？）

<VictoryChart scale={{ x: 'time' }}>
  <VictoryAxis tickFormat={(t) => `${t.getHours()}:${t.getMinutes()}`}/>
  <VictoryAxis dependentAxis/>

  <VictoryCandlestick data={candleStickData} />

  <VictoryLine labels={['']}
    animate={{ duration: 0, onLoad: { duration: 0 } }}
    data={[
      { x: dateStartX, y: dateStartY },
      { x: dateStartX, y: dateStartY }
    ]}
  />

  <VictoryLine
    labels={['']}
    animate={{ duration: 0, onLoad: { duration: 0 } }}
    data={[
      { x: secondDateStartX, y: secondDateStartY },
      { x: secondDateStartX, y: secondDateStartY }
    ]}
  />

</VictoryChart>

是否可以使用胜利图表来显示这样的网格？

到目前为止，我只能在条形顶部获得一个带有垂直线和水平线的网格，如下所示：

我正在使用React Victory Charts，需要一些样式方面的帮助。

我是Victory Charts的新手，您的帮助将受到高度欢迎。

我需要以下方面的帮助：

1. 轴，条和文本之间的填充。
2. 一些文本被截断。
3. 条形尺寸。

这就是我所拥有的：

<VictoryChart
  width={600}
  domainPadding={{ y: 50 }}>
    <VictoryAxis
        // tickValues specifies both the number of ticks and where
        // they are placed on the axis
        dependentAxis
        style={{
          tickLabels: {fontSize: 15, padding: 15 , width: 60}
        }}
        tickValues={[1, 2, 3, 4]}
        tickFormat={["Yes", "No", "Probably", "Never"]}
      />
  <VictoryBar horizontal
    offsetY={20}
    padding={{ top: 20, bottom: 60 }}
    style={{
      data: { fill: "rgb(23, 52, 76)" },
      parent: { border: "1px solid #ccc"},
    }}
      labels={(d) => …

我目前正在使用Victory图表,并且在处理向x轴添加时间方面存在问题.我需要显示一个折线图,显示y轴中0到1(百分比)之间的数字和x轴中的时间.我已经审查了他们的文档,并尝试了几种方案来使x坐标显示时间,但我没有看到数据库中的数据数据是如何被格式化为可接受的,以便随时显示.我希望时间以"10:30 AM"等格式显示.我想格式化x轴数据并在x轴和y轴上添加标签.我怎么做到这一点？我应该使用Date对象还是字符串格式可以接受基于时间的数据？字符串可以接受哪种比例？

我目前的图表jsx标签如下:

constructor (props) {
    super(props);
    this.state = {
        data: props.data,
        zoomDomain: { x: [new Date(2010, 1, 1), new Date(2050, 1, 1)] }
    }
}

handleZoom(domain) {
    this.setState({ zoomDomain: domain });
}

<VictoryChart width={400} height={500} theme={VictoryTheme.material} scale={{x:"time", y:"linear"}}
                      containerComponent={
                          <VictoryZoomContainer
                              zoomDimension="x"
                              zoomDomain={this.state.zoomDomain}
                              onZoomDomainChange={this.handleZoom}
                          />
                      }>
                    <VictoryAxis
                        tickFormat={(x) => {
                          return (new Date(x)).getFullYear();
                        }}
                        orientation="bottom"
                    />
                    <VictoryAxis dependentAxis
                                 tickFormat={(y) => y / 10}
                                 orientation="left"
                    />
                    <VictoryLine
                        groupComponent={<VictoryClipContainer clipPadding={{ top: 5, right: 10 }}/>}
                        style={{ data: { stroke: "#c43a31", strokeWidth: 5, …

我正在使用 Victory 来呈现数据集：

class App extends React.Component {
  render() {
    return (
      <div style={{ width: 600 }}>
        <VictoryChart domainPadding={30}>
          <VictoryAxis
            dependentAxis={true}
            style={{
              grid: { stroke: "grey" }
            }}
          />
          <VictoryAxis />
          <VictoryBar
            barWidth={20}
            style={{ data: { fill: "red" } }}
            data={[
              { x: new Date("2019-01-01"), y: 2 },
              { x: new Date("2019-02-01"), y: 3 },
              { x: new Date("2019-03-01"), y: 5 },
              { x: new Date("2019-04-01"), y: 4 },
              { x: new Date("2019-05-01"), y: 8 },
              { x: new Date("2019-06-01"), …

我在处理图表库时遇到问题。

一步步

1. 创建一个空项目

$ npx create-react-app chart-demo --template typescript

2. 添加记录

$ yarn add @types/recharts

3. 运行项目

$ yarn start

它显示以下错误。

Failed to compile
./src/App.tsx
Module not found: Can't resolve 'recharts' in '\chart-demo\src'

仅供参考，它不仅适用于重新图表，还适用于几个图书馆。幸运的是，我发现胜利图表正在运行

新项目真的很新鲜，只是添加recharts而已。
请帮我弄清楚这个问题。

Package.json

{
  "name": "chart-demo",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "@types/jest": "^24.0.0",
    "@types/node": "^12.0.0",
    "@types/react": "^16.9.0",
    "@types/react-dom": "^16.9.0",
    "@types/recharts": "^1.8.15",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.3",
    "typescript": "~3.7.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts …

快速问题 - 我有一个基于胜利图表的折线图，当有人将鼠标悬停在数据上时，我想在上面显示工具提示。

https://formidable.com/blog/2016/09/19/victory-0-12-0-the-one-true-tooltip/

表示“VictoryVoronoiTooltip”可能会有所帮助。

但是，这似乎不是当前胜利排行榜的一部分。我在编译期间收到“未找到”消息。更远;

https://formidable.com/open-source/victory/guides/tooltips/

这里建议相同......但点击“VictoryVoronoiTooltip”链接让我得到404。

有什么建议？

下面是一个通用的胜利代码。

 <svg viewBox={viewBox}>
          <VictoryPie
            standalone={false}
            width={width} height={height}
            data={data}
            innerRadius={innerRadius}
            colorScale={colorScale}

          />
          <VictoryLegend x={width - 50} y={30}
            title="Totals"
            centerTitle
            orientation="vertical"
            gutter={20}
            style={{
              title: { fontSize: 15 }
            }}
            data={legendDataWithStyle}
            standalone={false}
          />
</svg>

这是对应的Jsfiddle

我VictoryLegend x={width - 50} y={30}用来调节饼图和图例的距离。但我发现很难精确地调整它。如何增加饼图和图例的距离？