3

我正在尝试使用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 轴值重复。

在此处输入图像描述

4

1 回答 1

0

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

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

Recharts API XAxis (minTickGap)

于 2018-05-21T13:41:02.127 回答