1

请参阅 Codepen：Rechart 系列数据图表

现有图表

有关导致我的 XAxis 上出现重复键的事件（实验室、笔记等），请参阅该系列。我希望 Note 和 Lab 事件在同一日期显示。此外，事件应与事件 yAxis 水平对齐。虽然它们大致对齐，但数据点离我认为的交叉点太远了。

屏幕截图显示所需位置

所需图表

Codepen.io 代码：

 const {CartesianGrid,
    Legend,
    Line,
    LineChart,
    LabelList,   
    BarChart,
    Bar,   
    ReferenceDot,
    ResponsiveContainer,
    CartesianAxis,   
    ComposedChart,   
    Scatter,
    Tooltip,
    Cross,  
    XAxis,
    YAxis} = Recharts;

class App extends React.Component {

  render() {
    const data = [
            {name: '5/7/18', pain: 5, temp: 98.6, pulse: 77, event: 'Notes'},
            {name: '5/7/18', pain: 5, temp: 98.6, pulse: 77, event: 'Lab'},
            {name: '5/8/18', pain: 5, temp: 98.8, pulse: 90, event: 'Tx'},
            {name: '5/9/18', pain: 7, temp: 99.5, pulse: 100, event: 'Lab' },
            {name: '5/10/18', pain: 8, temp: 100.6, pulse: 103, event: 'Vitals'},
            {name: '5/11/18', pain: 7, temp: 99.8, pulse: 90, event: 'Notes'},
            {name: '5/12/18', pain: 5, temp: 98.6, pulse: 80, event: 'Tx'},
        ];
   const scatterData= [{name:'Lab'},
                       {name:'Notes'}]

        return (
            <div>
                <ResponsiveContainer width="90%" height={460}>

                    <ComposedChart data={data}>
                        <XAxis dataKey="name"/>
                        <YAxis yAxisId='left'  domain={[0,140]} label={{value: 'Vitals', angle: 0, position: 'insideBottomLeft'}}/>
                        <YAxis yAxisId='events' type='category'   padding={{ top: 20 }} />
                        <YAxis yAxisId="right" domain={[0,10]} orientation="right" label={{value: 'Pain', angle: 90, position: 'outsideRight'}} />
                        <CartesianGrid vertical={true} strokeDasharray="3 3"/>
                        <Tooltip/>
                        <Legend/>
                        <Line type="monotone" yAxisId='right' dataKey="pain" stroke="#82ca9d" activeDot={{r: 4}}/>
                        <Line type="monotone" yAxisId='left' dataKey="temp" stroke="#8884d8" activeDot={{r: 6}}/>
                        <Line type="monotone" yAxisId='left' dataKey="pulse" stroke="blue" activeDot={{r: 8}}/>
                        <Bar yAxisId='events' layout='verticle' barSize={0} maxBarSize={0} fill='#413ea0'  dataKey='event'>
                          <LabelList dataKey="event" content={renderCustomizedLabel} />
                        </Bar>
                    </ComposedChart>
                </ResponsiveContainer>
            </div>
        );
    }
}

const renderCustomizedLabel = (props) => {
  const { x, y, width, height, value } = props;
  const radius = 14;
  console.log(JSON.stringify(props));
  return (
          <g>
                <circle cx={x + width / 2} cy={y - radius} r={radius} fill="#8884d8" />
                <text x={x + width / 2} y={y - radius} fill="#fff" textAnchor="middle" dominantBaseline="middle">
                    {value[0]}
                </text>
            </g>  );
};


ReactDOM.render(<App />, document.querySelector('main'));
4

0 回答 0