标签: react-vis

我正在使用 XYPlot 和xType={\'time\'}俄语语言环境，如文档中所述，有没有办法将 24 小时时间格式传递给 d3-scale？

我需要的不是“03 AM”，而是“03:00”之类的内容。

d3-time-format 中的俄语区域设置的时间定义为 %H，应为 24 小时：

{\n    "dateTime": "%A, %e %B %Y \xd0\xb3. %X",\n    "date": "%d.%m.%Y",\n    "time": "%H:%M:%S",\n    "periods": ["AM", "PM"],\n    // ... some other options\n}\n

不幸的是，该设置不会影响缩放行为。

我正在尝试使用 react-vis。如果我使用 privided 示例，我会在线条之间看到黑色区域。我想念什么？

如何在 React-vis 上启用工具提示？

<Sunburst
 hideRootNode
 colorType="literal"
 data={data}
 height={300}
 width={350}/>

我没有看到有关可视化的工具提示，我如何才能看到悬停图表的工具？

以 SunBurst 为例，优步 github 页面上有一个示例，您必须根据数据点的角度重新计算工具提示的位置，这不是非常方便。

我正在使用react-vis lib进行可视化。谁能告诉我如何绘制时间序列图以获取以下数据？提前致谢。

data = [
    {x:"01/01/2018",y:75},
    {x:"14/02/2018",y:60},
    {x:"18/03/2018",y:80},
    {x:"15/04/2018",y:90},
    {x:"10/05/2018",y:95},
]

我正在评估react-vis。假设我有一个 react-vis简单图表，当图表悬停时，如何添加一条随鼠标移动的垂直线？我的猜测是，我需要在 XYPlot 内添加一个十字准线组件，也许还需要一个 YAxis 组件。但我不明白如何做，也找不到任何相关的例子。

function Chart({data}) {
  return <XYPlot width={400} height={300}><XAxis/><YAxis/>
    <HorizontalGridLines />
    <VerticalGridLines />
    <LineMarkSeries data={data} />
    </XYPlot>;
}

我正在阅读有关灵活图表的文档并尝试将它们应用于饼图：

import React from 'react'
import { RadialChart, FlexibleXYPlot } from 'react-vis'

const MyChart = ({data}) => (
  <div>
    <FlexibleXYPlot>
      <RadialChart
        data={data}
        colorType="literal"
      />
    </FlexibleXYPlot>
  </div>
)

但是在渲染这个时，我得到这样的标记：

<div>
  <div style="width: 100%; height: 100%;">
    <div class="rv-xy-plot " style="width: 0px; height: 0px;">
    </div>
  </div>
</div>

如您所见，rv-xy-plot元素的尺寸显式设置为0px。我究竟做错了什么？如何创建响应式饼图？

我已将 加到xType="time"图表中以在 x 轴上显示时间刻度。我只显示 25 秒范围内的数据。目前，x 轴将时间格式显示为:SS。

因此 x 轴以以下格式显示时间（数据显示每秒）：

:23, :24, :25

我从数据库中得到的是以下格式的时间字符串： 2019-07-01T10:42:38.621Z

我尝试了以下方法：

new Date(item.date) // shows ':023'
new Date(item.date).getTime() // shows ':023'
new Date(item.date.substring(19, 0)).getTime() // shows ':023'

    oscilloscope.oscilloscope.map((item, index) => {
        return {
            x: new Date(item.date.substring(19, 0)).getTime(),
            y: item.data.fuelInjection
        }
    })

总是得到相同的结果。

我希望 x 轴按格式进行HH:MM:SS格式化。

所以 x 轴显示的数据如下： 11:42:05, 11:42:06, 11:42:07

我显示的范围相隔 25 秒。这似乎是由图表自动设置的，就好像我将范围更改为包含几分钟的范围，x 轴上的时间显示更改为MM:SS格式。我仍然需要HH:MM:SS你的格式。这完全可以做到吗？

我如何在 React-Vis 中指定轴范围

例如：Y 轴为 0 到 100，数据如下

数据={[ {x: 1, y: 45}, {x: 2, y: 50}, {x: 3, y: 85} ]}/>

即使此处的最大 Y 值为 85，YAxis 也必须在 0 到 100 的范围内

我正在为我的一个项目使用 React-vis 库。我从网站上的一个示例中复制了示例图表的源代码。我直接复制了示例，但图表看起来仍然不符合预期。

import React from 'react';
import {curveCatmullRom} from 'd3-shape';

import {
  XYPlot,
  XAxis,
  YAxis,
  HorizontalGridLines,
  VerticalGridLines,
  LineSeries
} from 'index';

export default function Example(props) {
  return (
    <XYPlot width={300} height={300}>
      <HorizontalGridLines style={{stroke: '#B7E9ED'}} />
      <VerticalGridLines style={{stroke: '#B7E9ED'}} />
      <XAxis
        title="X Axis"
        style={{
          line: {stroke: '#ADDDE1'},
          ticks: {stroke: '#ADDDE1'},
          text: {stroke: 'none', fill: '#6b6b76', fontWeight: 600}
        }}
      />
      <YAxis title="Y Axis" />
      <LineSeries
        className="first-series"
        data={[{x: 1, y: 3}, {x: 2, y: 5}, {x: 3, y: 15}, {x: 4, y: …

我FlexibleWidthXYPlot在一个组件内部使用，如果组件应该可见并且定义了数据（通过 props），则该组件是有条件渲染的。

但react-vis计算图表宽度width=0（因此图表不显示）。我可以通过像这样重新渲染来使其正确计算宽度：

• 1. 调整浏览器大小
• 2. width将prop设置为固定值。

我不能做 2. 因为图表应该是响应式的。所以我尝试触发调整大小，componentDidMount但也没有运气：

public componentDidMount() {
  window.dispatchEvent(new Event('resize'));
}

我正在xDomain手动设置，所以我尝试了dontCheckIfEmpty={true}，但它也不起作用......

为什么FlexibleWidthXYPlot计算宽度为0？我该如何解决它？

经济概览.tsx

import React from 'react'
import { Theme, createStyles, withStyles, WithStyles, Card } from '@material-ui/core'
import SelectableTabs from './SelectableTabs'
import PaymentsChart from './PaymentsChart'
import MileageChart from './MileageChart'
import { IMileageChart, IPaymentChart } from '@omnicar/sam-types'
import * as api from 'api/api'
import notify from 'utils/notify/notify'

interface IProps { …