reactjs - Recharts ScatterChart 未在 XAxis 中渲染点和重复值

Question

我正在尝试使用 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 = [{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}]

示例数据示例:{ test@yahoo.com: datum }

没有点，并且 x 轴值重复。

Answer 1

您可以尝试增加带有日期的轴标签之间的间隙

<XAxis dataKey="created_at" name='created_at' tickFormatter={formatXAxisDate} minTickGap={30} type="category" allowDuplicatedCategory={false} />

Recharts API XAxis (minTickGap)