1

我有以下代码，其中 y 轴上只有 2 个值，这意味着单个段就足够了。但事实证明，顶行的 y 标签没有出现。有解决办法吗？当前图表状态

下面是我为此编写的代码。

< LineChart
data = {
  dataFrame
}
width = {
  width - 20
}
height = {
  height
}
withShadow = {
  true
}
withDots = {
  true
}
withScrollableDot = {
  true
}
withOuterLines = {
  true
}
transparent = {
  true
}
withInnerLines = {
  true
}
chartConfig = {
  {
    backgroundColor: '#fff000',
    backgroundGradientFrom: '#ffffff',
    backgroundGradientTo: '#fffffa',
    decimalPlaces: 0,
    linejoinType: 'round',
    scrollableDotFill: '#fff',
    scrollableDotRadius: 6,
    scrollableDotStrokeColor: 'tomato',
    scrollableDotStrokeWidth: 3,
    scrollableInfoViewStyle: {
      justifyContent: 'center',
      alignContent: 'center',
      backgroundColor: '#121212',
      borderRadius: 2,
      marginTop: 25,
      marginLeft: 25,
    },
    scrollableInfoTextStyle: {
      fontSize: 10,
      color: '#C4C4C4',
      marginHorizontal: 2,
      flex: 1,
      textAlign: 'center',
    },
    scrollableInfoSize: {
      width: 30,
      height: 30
    },
    scrollableInfoOffset: 15,
    labelColor: (opacity = 1) => `rgba(0, 0, 0, ${opacity})`,
    color: (opacity = 1) => `rgb(78, 135, 210, ${opacity})`,
    propsForBackgroundLines: {
      strokeDasharray: '', // solid background lines with no dashes
      strokeDashoffset: 15,
    },
  }
}
segments = {1}
/>

任何帮助表示赞赏。

4

1 回答 1

0

它看起来是在AbstractChart.tsxrenderHorizontalLabels中定义函数的方式中的一个错误。如果等于，实际上只返回一个水平标签而不是。segments12

有一种解决方法可以达到您想要的效果。您可以创建一个生成器函数并像这样使用该formatYLabel道具LineChart：

const d = [0, 110, 90, 130, 80, 103]; // example data

function* yLabel() {
  const min = Math.min(...d); // minimum value of data array d
  const max = Math.max(...d); // maximum value of data array d

  yield* [min, '', max]; 
}

function App() {
  // Instantiate the iterator
  const yLabelIterator = yLabel();

  return (
    <LineChart
      data={{
        labels: ['January', 'February', 'March', 'April', 'May', 'June'],
        datasets: [
          {
            data: d,
          },
        ],
      }}
      width={400}
      height={200}
      withShadow={true}
      withDots={true}
      withScrollableDot={true}
      withOuterLines={true}
      transparent={true}
      withInnerLines={true}
      chartConfig={{
        backgroundColor: '#fff000',
        backgroundGradientFrom: '#ffffff',
        backgroundGradientTo: '#fffffa',
        decimalPlaces: 0,
        linejoinType: 'round',
        scrollableDotFill: '#fff',
        scrollableDotRadius: 6,
        scrollableDotStrokeColor: 'tomato',
        scrollableDotStrokeWidth: 3,
        scrollableInfoViewStyle: {
          justifyContent: 'center',
          alignContent: 'center',
          backgroundColor: '#121212',
          borderRadius: 2,
          marginTop: 25,
          marginLeft: 25,
        },
        scrollableInfoTextStyle: {
          fontSize: 10,
          color: '#C4C4C4',
          marginHorizontal: 2,
          flex: 1,
          textAlign: 'center',
        },
        scrollableInfoSize: {
          width: 30,
          height: 30,
        },
        scrollableInfoOffset: 15,
        labelColor: (opacity = 1) => `rgba(0, 0, 0, ${opacity})`,
        color: (opacity = 1) => `rgb(78, 135, 210, ${opacity})`,
        propsForBackgroundLines: {
          strokeDasharray: '', 
          strokeDashoffset: 15,
        },
      }}
      segments={2}
      formatYLabel={() => yLabelIterator.next().value}
    />
  );
}

所以这里的想法是使用 的segments值，但是为中间标签显示一个空字符串，这给出了您在设置为2时期望得到的效果。segments1

于 2020-10-11T20:16:03.257 回答