- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我想创建一个包含多行的 ReChart 组件。
到目前为止,我有这个虚拟代码。
<LineChart
data={data}
margin={{
top: 16,
right: 16,
bottom: 0,
left: 24
}}
>
<XAxis dataKey="time" />
<YAxis>
<Label angle={270} position="left" style={{ textAnchor: "middle" }}>
Cyber assesment
</Label>
</YAxis>
<Line type="monotone" dataKey="amount" stroke="#556CD6" dot={false} />
</LineChart>
数据是一个数组,有两个值对象:
function createData(time, amount) {
return { time, amount };
}
const data = [
createData('00:00', 0),
createData('03:00', 300),
createData('06:00', 600),
createData('09:00', 800),
createData('12:00', 1500),
createData('15:00', 2000),
createData('18:00', 2400),
createData('21:00', 2400),
createData('24:00', undefined),
];
我想这样做,这样我就可以绘制多条线,我尝试创建一个不同的函数并将其他数据添加到同一个数组,但没有很好的结果。
如何实现?
我试图创建一个工作示例,但没有任何运气
function createData(amountA, amountB) {
return {a: amountA, b: amountB };
}
const data = [
createData(100, 200),
createData(200, 400),
createData(400, 500),
createData(600, 800),
createData(650, 700),
createData(900, 800)
];
export default function Chart() {
console.log(data)
return (
<React.Fragment>
<Title>Performance indication</Title>
<ResponsiveContainer>
<LineChart
data={data}
margin={{
top: 16,
right: 16,
bottom: 0,
left: 24,
}}
>
<XAxis dataKey="time" />
<YAxis>
<Label angle={270} position="left" style={{ textAnchor: 'middle' }}>
Cyber assesment
</Label>
</YAxis>
<Line type="monotone" dataKey={data.a} stroke="#556CD6" dot={false} />
<Line type="monotone" dataKey={data.b} stroke="#556CD6" dot={false} />
</LineChart>
</ResponsiveContainer>
</React.Fragment>
最佳答案
只需在 LineChart
中声明两个 Line
和两个 YAxis
components
并显式声明 yAxisId
。这是我们的一个例子
<LineChart data={data} margin={{ left: -10, right: 10 }}>
<XAxis height={40} dataKey="part" tick={{ fontSize: 10 }}>
<Label
value='Período'
position='insideBottom'
fontSize={14}
fill='#676767'
/>
</XAxis>
<YAxis width={80} yAxisId="left" tick={{ fontSize: 10 }}>
<Label
value={selected.A}
angle={-90}
position='outside'
fill='#676767'
fontSize={14}
/>
</YAxis>
<YAxis width={80} yAxisId="right" orientation="right" tick={{ fontSize: 10, }}>
<Label
value={selected.B}
angle={-90}
position='outside'
fill='#676767'
fontSize={14}
/>
</YAxis>
<Tooltip formatter={(value) => floatParser(value)} />
<Line yAxisId="left" type="monotone" dataKey={selected.A} stroke={colors[1]} />
<Line yAxisId="right" type="monotone" dataKey={selected.B} stroke={colors[0]} />
</LineChart>
数据
数组:
const data = [
{ part: 'foo', axisA: 21211, axisB: 1232 }
]
关于javascript - 多行 ReCharts,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58133726/
我想使用 Recharts 绘制图表。 我目前正在查看他们网站上的文档中给出的示例。 将他们的代码复制到我的应用程序中后,我遇到以下错误: 'recharts' does not contain an
假设我正在使用 Recharts 创建条形图,我将如何为以下每个 Recharts 组件创建自定义组件: XAxis、YAxis、Tooltip、Legend、CartesianGrid、Cell 和
我正在尝试在 Recharts 图表的右下角添加一段静态文本(与显示的数据无关)。 我可以将一些 CSS 和 HTML 组合在一起,以从相邻的 DOM 元素获取文本,但我宁愿使用 recharts A
正如您在屏幕截图中看到的那样,在底部中心(x 轴),标签 Quiz/Exam 被裁剪了。我增加了折线图的高度,但它只会增加图表的大小。 最佳答案 我遇到了同样的问题并通过添加 margin 修复了它到
我有一个包含 14 个数据点的 Recharts LineChart(尽管将来这可能会有所不同,所以理想情况下我不想对它进行硬编码)。我想在 X 轴上显示 2 个刻度值 - 第一个和最后一个。 所以,
我的图表组件有一个非常简单的数据数组: {name: '12.1.2011', series1: 4000, series2: 2400, series3: 2400}, {name: '12.2.2
我的条形图中有三个不同的条形。 我希望条形图中的每个条形都有一个工具提示,而不仅仅是三个。 import React from 'react'; import { BarChart, Bar,
我对 React 和 Recharts 都很陌生,而且我有点进退两难。我做了很多阅读,但似乎找不到我要找的东西,所以我希望能在这里得到一些帮助。 我有一个数据集,其中包含具有已完成、失败和进行中状态的
我正在使用 recharts饼图库。 我想始终为两个值加载饼图。图表正在水平加载,如您所见 here从 Angular 0 开始。 但我希望它从 Angular 90 开始,如下所示。 PS:尝试更改
Recharts 文档描述了如何在悬停期间格式化数据点的样式以及工具提示。 然而,在悬停期间,文档中似乎没有描述出现的垂直实线(除非我遗漏了它)。 是否有允许格式化该行的 Prop ? (如果你不知道
我正在尝试在重新图表雷达图表上获取自定义标签工作。我已经尝试根据文档做多件事,所以我想我会把它扔给狼群。希望你们中的一个能指出我正确的方向。
我正在使用 Rechart 的散点图 数据显示正常,但我想工具提示显示一个额外的弹出窗口(项目的名称),就像它在条形图上一样。我发现我可以完全自定义工具提示,但我想知道是否有更简单的方法?就像一个我不
我正在使用双轴折线图,并试图弄清楚如何使用格式化程序功能来格式化工具提示的内容。 我想要的是让我的输出阅读: 2019-01-13 Price: $17.99 Sales Rank: 326,518
我创建了一个折线图,并尝试在其顶部放置 2 个标签,但没有成功。我在开头和结尾使用了 2 条引用线,以及它们上面的标签。我正在努力实现以下目标: L1 L2 | |_______ 代码:
是否可以在工具提示上为大数字添加逗号? 例如57,574 而不是 57574 谢谢! 最佳答案 是的,您可以使用 formatter 属性将任何格式化程序函数传递给工具提示组件,例如 new
我正在尝试学习如何使用 Rechart。该文档说您可以在图表元素上放置标签,并给出了如何使用“名称”作为标签数据键来执行此操作的示例。 我尝试在图表中执行此操作,但没有成功。 如果我从字段中删除“标签
我正在使用 Recharts 库创建 StackBarChart 示例,但当其位置设置为“右”时我无法看到标签 code> 虽然我可以显示其他标签位置。 ...
有没有办法关闭 Recharts 中条形图悬停时出现的灰色背景? ? 使用版本 1.4.1。代码(简化)如下所示: import React from "react" // Recharts impo
我想创建一个包含多行的 ReChart 组件。 到目前为止,我有这个虚拟代码。 Cyber assesment 数据是一个数组,有两个值对象
我正在尝试使用 reChart 呈现条形图以 100% 适合其容器: http://recharts.org/#/en-US/api/ResponsiveContainer
我是一名优秀的程序员,十分优秀!