0

我正在尝试创建一个要根据键的存在进行着色的区域。我希望阴影在 Y 轴上从最小值到最大值，并且我希望最大值取决于数据集的当前局部最大值（相对于画笔）。

我尝试使用 ReChart.js 的内部结构，例如 getTicksOfAxis 和 getValueByDataKey，因为我知道 Y 轴已经知道局部最大值，所以我不必重新发明轮子。任何人都有任何解决方案

和我一起玩

const {ComposedChart, Area ,LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend,Brush} = Recharts;
const data = [
      {name: 'Page A', pv: 2400, max: 10800},
      {name: 'Page q', pv: 4800, max: 10800},
      {name: 'Page w',  pv: 1398},
      {name: 'Page e',  pv: 0},
      //I don't want this part max to squish the pv values since Max should be of the local max.
      {name: 'Page r',  pv: 300, max: 10800},
      {name: 'Page t',  pv: 200, max: 10800},
      {name: 'Page y',  pv: 0},
      {name: 'Page u',  pv: 500},
      {name: 'Page i',  pv: 1398, max: 10800},
      {name: 'Page o',  pv: 4300, max: 10800},
      {name: 'Page p', pv: 10800 },
      {name: 'Page [', pv: 3908 },
      {name: 'Page ]',pv: 4800, max: 10800},
      {name: 'Page F', pv: 3800, max: 10800},
      {name: 'Page G', pv: 4300, max: 10800},
];
const SimpleLineChart = React.createClass({
	render () {
  	return (
    	<ComposedChart width={600} height={300} data={data}
            margin={{top: 5, right: 30, left: 20, bottom: 5}}>
       <XAxis dataKey="name"/>
       <YAxis type="number"/>
       <CartesianGrid strokeDasharray="3 3"/>
       <Tooltip/>
       <Legend />
       <Line type="monotone" dataKey="pv" stroke="#8884d8" activeDot={{r: 8}}/>
       <Area type="monotone" dataKey="max" stroke="#8884d8" activeDot={{r: 8}}/>
       <Brush/>
      </ComposedChart>
    );
  }
})

ReactDOM.render(
  <SimpleLineChart />,
  document.getElementById('container')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

4

1 回答 1

0

合适的例子 提供的图表是我的目标，其中阴影区域代表某个数据点。通过为“local-max”ei 提供一种方法，我能够创建锯齿外观（使用画笔）：

let data=[{ line-graph:<arbitrary_value>, shaded-areas:local_max()},...]; let local_max=()=>{return this.state.localMax}

然后我必须发现局部最大值，这涉及获取画笔 start/endIndex 并将它们保存到状态。

于 2018-11-17T20:22:07.360 回答