Recharts ScatterChart不在XAxis中渲染点和复制值

时间:2017-12-29 03:03:36

标签: reactjs charts scatter recharts

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

enter image description here

1 个答案:

答案 0 :(得分:0)

您可以尝试增加日期

的轴标签之间的差距
<XAxis dataKey="created_at" name='created_at' tickFormatter={formatXAxisDate} minTickGap={30} type="category" allowDuplicatedCategory={false} />

Recharts API XAxis (minTickGap)