У меня есть 9 различных серий линий, нарисованных на графике реакции. Значения этих рядов строк различаются. Наименьший диапазон — от 0 до 4, самый большой — от 0 до 12000 (изображение 1). Когда я рисую все эти серии линий, большинство из них располагаются внизу графика, будучи недостаточно читаемыми.
диаграмма реакции и отображения, показывающая текущий диапазон 0–2000
Я пытался использовать yDomain={[0, 100]}. Однако то, что я вижу сейчас, заключается в том, что максимальное значение графика в конечном итоге равно 100, а все остальные серии строк со значениями выше 100 не видны (они рисуются над тем, что мы можем видеть).
Вот пример кода, если это поможет:
<FlexibleWidthXYPlot
onMouseLeave={() => this.setState({crosshairValues: []})}
height={250}
color="blue"
size="12"
xType="time"
yDomain={[0, 100]}
>
<VerticalGridLines />
<HorizontalGridLines />
<XAxis
tickFormat={function tickFormat(d){
const date = new Date(d)
return date.toISOString().substr(11, 8)
}}
tickLabelAngle={45}
margin={{bottom: 100}}
padding={{left: 100}}
/>
<YAxis />
<LineSeries
onNearestX={(value, {index}) =>
this.setState({crosshairValues: gasDataFiltered.map(d => d[index])}
)}
data={gasDataFiltered[0]}
color="#27AE60"
opacity={battVoltShow === true ? 1 : 0.15}
/>
<LineSeries
data={gasDataFiltered[1]}
color="#2A80B9"
opacity={fuelInjShow === true ? 1 : 0.15}
/>
<LineSeries
data={gasDataFiltered[2]}
color="#8E44AD"
opacity={gasInjShow === true ? 1 : 0.15}
/>
<LineSeries
data={gasDataFiltered[3]}
color="#560E0D"
opacity={gasLvlShow === true ? 1 : 0.15}
/>
<LineSeries
data={gasDataFiltered[4]}
color="#F39C13"
opacity={gasPressShow === true ? 1 : 0.15}
/>
<LineSeries
data={gasDataFiltered[5]}
color="#E91F62"
opacity={gasTempShow === true ? 1 : 0.15}
/>
<LineSeries
data={gasDataFiltered[6]}
color="#20E3D1"
opacity={mapShow === true ? 1 : 0.15}
/>
<LineSeries
data={gasDataFiltered[7]}
color="#246A80"
opacity={reducerTempShow === true ? 1 : 0.15}
/>
<LineSeries
data={gasDataFiltered[8]}
color="#FF81C3"
opacity={rpmShow === true ? 1 : 0.15}
/>
<Crosshair values={crosshairValues}>
<div className='oscilloscope-tooltip'>
<ul>
<li><span className='oscilloscope-color oscilloscope-color--green'></span>{t('oscilloscope.battVolt')}: {crosshairValues[0] !== undefined && crosshairValues[0].y}</li>
<li><span className='oscilloscope-color oscilloscope-color--blue'></span>{t('oscilloscope.fuelInj')}: {crosshairValues[1] !== undefined && crosshairValues[1].y}</li>
<li><span className='oscilloscope-color oscilloscope-color--purple'></span>{t('oscilloscope.gasInj')}: {crosshairValues[2] !== undefined && crosshairValues[2].y}</li>
<li><span className='oscilloscope-color oscilloscope-color--dark'></span>{t('oscilloscope.gasLvl')}: {crosshairValues[3] !== undefined && crosshairValues[3].y}</li>
<li><span className='oscilloscope-color oscilloscope-color--orange'></span>{t('oscilloscope.gasPress')}: {crosshairValues[4] !== undefined && crosshairValues[4].y}</li>
<li><span className='oscilloscope-color oscilloscope-color--red'></span>{t('oscilloscope.gasTemp')}: {crosshairValues[5] !== undefined && crosshairValues[5].y}</li>
<li><span className='oscilloscope-color oscilloscope-color--light'></span>{t('oscilloscope.map')}: {crosshairValues[6] !== undefined && crosshairValues[6].y}</li>
<li><span className='oscilloscope-color oscilloscope-color--navy'></span>{t('oscilloscope.reducerTemp')}: {crosshairValues[7] !== undefined && crosshairValues[7].y}</li>
<li><span className='oscilloscope-color oscilloscope-color--pink'></span>{t('oscilloscope.rpm')}: {crosshairValues[8] !== undefined && crosshairValues[8].y}</li>
</ul>
</div>
</Crosshair>
</FlexibleWidthXYPlot>
Я хотел бы, чтобы каждая серия строк воспринималась в диапазоне от 0 до 100% без изменения фактических значений. Мне нужно, чтобы эти значения по-прежнему отображались, поскольку я использую перекрестие, чтобы показать их.
