ReCharts.Js Затененные области Для полной высоты диаграммы (и в соответствии с Brush, dataMax) - PullRequest
Новая
       10

ReCharts.Js Затененные области Для полной высоты диаграммы (и в соответствии с Brush, dataMax)

0 голосов
/ 01 ноября 2018

Я пытаюсь создать область, которая должна быть затенена на основе подарков ключа. Я хочу, чтобы затенение было от минимального до максимального по оси 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>

1 Ответ

0 голосов
/ 17 ноября 2018

Подходящий пример Приведенный график - это то, к чему я стремился, где заштрихованная область является репрезентативной для некоторой точки данных. Я смог создать внешний вид пилообразной формы (работая с кистью), предоставив метод для "local-max" e.i:

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

Затем мне пришлось обнаружить локальные максимумы, которые включают в себя начало / окончание работы кистей и сохранение их в состояние.

...