我尝试使用ReCharts呈现ScatterChart。
y轴正确渲染,不同散点线的标签也是如此,但是没有出现点,x轴包含重复值。
let line2, yAxis = null;
let y_axis1 = y_axis;
const scatters = [];
if (predictionType === 'range') {
y_axis1 = "lower_bound";
line2 = <Line type="monotone" dataKey="upper_bound" stroke="#82ca9d" />
Object.keys(data).map((email, i) => {
const datum = data[email];
const lowerBoundName = `${email} lower bound`
const upperBoundName = `${email} upper bound`
scatters.push(<Scatter
data={datum}
dataKey='lower_bound'
key={-i}
fill="#8884d8"
name={lowerBoundName}
shape='square' />)
scatters.push(<Scatter
data={datum}
dataKey='upper_bound'
key={i}
fill="#8884d8"
name={upperBoundName}
shape='diamond' />)
})
} else {
Object.keys(data).map((email, i) => {
const datum = data[email];
console.log(datum)
scatters.push(<Scatter
dataKey='value'
data={datum}
key={i}
fill="#8884d8"
name={email} />)
})
}
// Customize
const LineColor = y_axis == 'average' ? '#81d4fa' : '#81d4fa';
if (predictionType === 'boolean') {
yAxis = <YAxis
allowDecimals={false}
ticks={[0,1]}
tickFormatter={(tickItem) => tickItem === 1 ? 'true' : 'false'}
/>
} else {
yAxis = <YAxis name='value'/>
}
return (
<ScatterChart width={730} height={250}
margin={{ top: 20, right: 20, bottom: 10, left: 10 }}>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="created_at" name='created_at' tickFormatter={formatXAxisDate}/>
{yAxis}
<Tooltip cursor={{ strokeDasharray: '3 3' }} />
<Legend />
{scatters}
</ScatterChart>
)
prediction_type
指定数据是包含下限值还是上限值。对我的问题来说,这并不重要。无论价值prediction_type
如何,问题都会发生。以下是示例datum
:
datum = [{created_at: "2017-12-29T02:28:31.290Z", confidence: 0.5, lower_bound: 1, upper_bound: 10}
{created_at: "2017-12-29T02:28:43.283Z", confidence: 0.6, lower_bound: 5, upper_bound: 7}
{created_at: "2017-12-29T02:28:57.074Z", confidence: 0.7, lower_bound: 8, upper_bound: 13}
{created_at: "2017-12-29T02:32:27.891Z", confidence: 0.6, lower_bound: 8, upper_bound: 20}
{created_at: "2017-12-29T02:34:08.463Z", confidence: 0.95, lower_bound: 6, upper_bound: 10}]
示例data
示例:{ test@yahoo.com: datum }
没有点,x轴值重复。
答案 0 :(得分:0)
您可以尝试增加日期
的轴标签之间的差距<XAxis dataKey="created_at" name='created_at' tickFormatter={formatXAxisDate} minTickGap={30} type="category" allowDuplicatedCategory={false} />