React vis react vis中是否有一个函数，用于将每条线系列缩放到其中'；域最小值设置为0，最大值设置为100的s%范围

我有9个不同的线系列正在绘制的反应vis图。这些线系列的值各不相同。最小范围在0-4之间，最大范围在0-12000之间（图1）。当我画出所有这些直线系列时，大多数都坐在了图表的底部，可读性不够

我尝试过使用

yDomain={[01100]}

。然而，我现在看到的情况是，图形的最大值最终为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>

this.setState（{crosshairValues:[]}）
高度={250}
color=“蓝色”
size=“12”
xType=“时间”
yDomain={[01100]}
>
this.setState（{crosshairValues:gasDataFiltered.map（d=>d[index]））
)}
数据={gasDataFiltered[0]}
color=“#27AE60”
不透明度={battwoltshow==true？1:0.15}
/>

{t（'scolector.battVolt'）}:{crosshairValues[0]！==未定义的和&crosshairValues[0].y}
{t（'scoscope.fuelInj'）}:{crosshairValues[1]！==未定义的和&crosshairValues[1].y}
{t（'scoscope.gasInj'）}:{crosshairValues[2]！==未定义的和&crosshairValues[2].y}
{t（'scoscope.gasLvl'）}:{crosshairValues[3]！==未定义的和&crosshairValues[3].y}
{t（'scoscope.gapress'）}:{crosshairValues[4]！==未定义的和&crosshairValues[4].y}
{t（'scoscope.gasTemp'）}:{crosshairValues[5]！==未定义的和&crosshairValues[5].y}
{t（'scolector.map'）}:{crosshairValues[6]！==未定义的和&crosshairValues[6].y}
{t（'scoscope.reducerTemp'）}:{crosshairValues[7]！==未定义的和&crosshairValues[7].y}
{t（'scolector.rpm'）}:{crosshairValues[8]！==未定义的和&crosshairValues[8].y}

---

我想要的是，在不修改实际值的情况下，将每条线系列感知地缩放到0-100%的范围。我需要在使用十字线显示这些值时仍显示这些值。

以下是我如何缩放两个图形（一个值以百万计，第二个值以%）以同时在一个绘图上显示的示例

export const getBound = (arr, key, max = true) => {
  if (!Array.isArray(arr)) {
    return false
  }
  // `${key}0` is a check for graphs that has y0 and x0 values, for example Bar Charts
  const key0 = `${key}0`
  let result = max ? 0 : Number(arr[0][key])
  arr.forEach(item => {
    if (max) {
      if (Number(item[key]) > result || (item[key0] && Number(item[key0]) > result)) {
        result = item[key0] ? (Number(item[key]) > Number(item[key0])
          ? Number(item[key]) : Number(item[key0])) : Number(item[key])
      }
    } else {
      if (Number(item[key]) < result || (item[key0] && Number(item[key0]) < result)) {
        result = item[key0] ? (Number(item[key]) < Number(item[key0])
          ? Number(item[key]) : Number(item[key0])) : Number(item[key])
      }
    }
  })
  return result
}


export const getScaleValues = (arr1, arr2, roundTicksTo = 5) => {
  const arr1AbsMax = Math.abs(getBound(arr1, 'y')) > Math.abs(getBound(arr1, 'y', false))
    ? Math.abs(getBound(arr1, 'y')) : Math.abs(getBound(arr1, 'y', false))

  const arr2AbsMax = Math.abs(getBound(arr2, 'y')) > Math.abs(getBound(arr2, 'y', false))
    ? Math.abs(getBound(arr2, 'y')) : Math.abs(getBound(arr2, 'y', false))

  const coef = arr1AbsMax / arr2AbsMax

  const scaled = arr2.map(item => {
    return Object.assign({}, item, {
      y: item.y * coef,
    })
  })

  const ticksFormat = (v) => formatPercentageTicks(v, coef, roundTicksTo)

  return {
    coef: coef,
    scaled: scaled,
    ticksFormat: ticksFormat,
  }
}

export const formatPercentageTicks = (value, coef, roundTo = 1) => {
  return `${round(value / (coef), roundTo)} %`
}

export const round = (num, roundTo) => {
  return num % roundTo < (Math.ceil(roundTo / 2))
    ? (num % roundTo === 0 ? num : Math.floor(num / roundTo) * roundTo) : Math.ceil(num / roundTo) * roundTo
}

export const getBound=（arr，key，max=true）=>{
如果（！Array.isArray（arr））{
返回错误
}
//`${key}0`是对具有y0和x0值的图的检查，例如条形图
常量key0=`${key}0`
让结果=最大值？0：数字（arr[0][键]）
arr.forEach（项目=>{
如果（最大值）{
if（编号（项目[key0]）>结果（项目[key0]&&Number（项目[key0]）>结果））{
结果=项目[key0]？（编号（项目[key]）>编号（项目[key0]）
编号（项目[键]）：编号（项目[键0]）：编号（项目[键]）
}
}否则{
if（编号（项目[key0]）{
const arr1AbsMax=Math.abs（getBound（arr1，'y'））>Math.abs（getBound（arr1，'y'，false））
？Math.abs（getBound（arr1，'y'））：Math.abs（getBound（arr1，'y'，false））
const arr2AbsMax=Math.abs（getBound（arr2，'y'））>Math.abs（getBound（arr2，'y'，false））
？Math.abs（getBound（arr2，'y'））：Math.abs（getBound（arr2，'y'，false））
常数系数=arr1AbsMax/arr2AbsMax
const scaled=arr2.map（项=>{
返回Object.assign（{}，item{
y:item.y*coef，
})
})
常量ticksFormat=（v）=>formatPercentageTicks（v，coef，roundTicksTo）
返回{
coef:coef，
缩放：缩放，
ticksFormat:ticksFormat，
}
}
导出常量formatPercentageTicks=（值，coef，roundTo=1）=>{
返回`${round（value/（coef），roundTo）}%`
}
导出const round=（num，roundTo）=>{
返回数值%roundTo<（数学单元（roundTo/2））
？（num%roundTo==0？num:Math.floor（num/roundTo）*roundTo）：Math.ceil（num/roundTo）*roundTo
}

如果您有9行，您可以将1作为默认值，并将其他8行从默认值缩放为%。 此外，默认的YAxis将显示数字，您可以在右侧为%添加其他YAxis：

<YAxis orientation={'right'} tickFormat={v => scaledObj.ticksFormat(v)} />

scaledObj.ticksFormat（v）}/>

下面是一个示例，我如何缩放两个图形（一个值以百万计，第二个值以%）以同时显示在一个绘图上

export const getBound = (arr, key, max = true) => {
  if (!Array.isArray(arr)) {
    return false
  }
  // `${key}0` is a check for graphs that has y0 and x0 values, for example Bar Charts
  const key0 = `${key}0`
  let result = max ? 0 : Number(arr[0][key])
  arr.forEach(item => {
    if (max) {
      if (Number(item[key]) > result || (item[key0] && Number(item[key0]) > result)) {
        result = item[key0] ? (Number(item[key]) > Number(item[key0])
          ? Number(item[key]) : Number(item[key0])) : Number(item[key])
      }
    } else {
      if (Number(item[key]) < result || (item[key0] && Number(item[key0]) < result)) {
        result = item[key0] ? (Number(item[key]) < Number(item[key0])
          ? Number(item[key]) : Number(item[key0])) : Number(item[key])
      }
    }
  })
  return result
}


export const getScaleValues = (arr1, arr2, roundTicksTo = 5) => {
  const arr1AbsMax = Math.abs(getBound(arr1, 'y')) > Math.abs(getBound(arr1, 'y', false))
    ? Math.abs(getBound(arr1, 'y')) : Math.abs(getBound(arr1, 'y', false))

  const arr2AbsMax = Math.abs(getBound(arr2, 'y')) > Math.abs(getBound(arr2, 'y', false))
    ? Math.abs(getBound(arr2, 'y')) : Math.abs(getBound(arr2, 'y', false))

  const coef = arr1AbsMax / arr2AbsMax

  const scaled = arr2.map(item => {
    return Object.assign({}, item, {
      y: item.y * coef,
    })
  })

  const ticksFormat = (v) => formatPercentageTicks(v, coef, roundTicksTo)

  return {
    coef: coef,
    scaled: scaled,
    ticksFormat: ticksFormat,
  }
}

export const formatPercentageTicks = (value, coef, roundTo = 1) => {
  return `${round(value / (coef), roundTo)} %`
}

export const round = (num, roundTo) => {
  return num % roundTo < (Math.ceil(roundTo / 2))
    ? (num % roundTo === 0 ? num : Math.floor(num / roundTo) * roundTo) : Math.ceil(num / roundTo) * roundTo
}

export const getBound=（arr，key，max=true）=>{
如果（！Array.isArray（arr））{
返回错误
}
//`${key}0`是对具有y0和x0值的图的检查，例如条形图
常量key0=`${key}0`
让结果=最大值？0：数字（arr[0][键]）
arr.forEach（项目=>{
如果（最大值）{
if（编号（项目[key0]）>结果（项目[key0]&&Number（项目[key0]）>结果））{
结果=项目[key0]？（编号（项目[key]）>编号（项目[key0]）
编号（项目[键]）：编号（项目[键0]）：编号（项目[键]）
}
}否则{
if（编号（项目[key0]）