react-native - react-native-chart-kit 1段折线图不打印y标签
问题描述
我有以下代码,其中 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}
/>
任何帮助表示赞赏。
解决方案
它看起来是在AbstractChart.tsxrenderHorizontalLabels
中定义函数的方式中的一个错误。如果等于,实际上只返回一个水平标签而不是。segments
1
2
有一种解决方法可以达到您想要的效果。您可以创建一个生成器函数并像这样使用该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
时期望得到的效果。segments
1
推荐阅读
- visual-studio-code - Vscode(版本:1.46.1)未索引所有文件以进行搜索(更新后)
- splunk - Splunk 查询:为每个匹配的搜索事件检索前 5 个先前的 _raw 事件
- php - 您可以在原生 PHPWord 模板中使用 Word 内容控制字段作为占位符吗?
- angular - 如何通过服务改进列表组件?
- .net - 如何在浏览器 Azure C# 函数中打开容器文件
- wkhtmltopdf - 如何在 wkhtmltopdf 中使用替换或将值发送到标题
- python - 如何在python列表中的2个元素之间插入元素?
- php - Laravel Blade 到 Vuejs
- r - 使用 quadprog 包签署错误/反转结果
- python - 如何在不通过扬声器播放的情况下将 mp3 或 wav 文件直接播放到我自己的麦克风中?