react-vis中有没有一个函数可以将每一行序列缩放到它的%范围内，其中domain min设置为0，max设置为100

Question

我在react-vis图上绘制了9种不同的线条系列。这些线序列的值是不同的。最小范围在0-4之间，最大范围在0- 12000之间(图1)。当我绘制所有这些线列时，它们大多数都坐在图的底部，可读性不够好。

react-vis graph showing the current range 0 - 2000

我试过使用yDomain={[0, 100]}。然而，我现在看到的是，图形的最大值最终是100，并且所有其他值大于100的线列是不可见的(它们被绘制在我们可以看到的上方)。

react-vis graph showing the range set by yDomain to 0-100 and missing other line series as a result

如果这有帮助，下面是一个代码示例：

            <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%的范围，而不修改实际值。我需要这些值仍然显示，因为我正在使用十字准线来显示它们。

Answer 1

这是一个示例，我如何缩放两个图表(一个值以百万为单位，第二个以百分比为单位)，以同时在一个图表上显示。

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
}

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

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