Question

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

我尝试使用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>

Answer 1

Suitable Example 提供的图形正是我要针对的阴影区域代表某些数据点的图形。通过提供“ local-max” e.i的方法，我能够创建锯齿外观（使用画笔）：

let string = String::from("Hallo"); let x: &str = &string;

然后，我不得不发现局部最大值，这涉及获取画笔的start / endIndex并将其保存为状态。

ReCharts.Js阴影区域，用于图表的完整高度（并与Brush，dataMax一致）

1 个答案: