我真的很喜欢整洁的反应 - 新曲 - 但是我对显示数据的方式有疑问。
它将数据中的最低点作为底部和最高点作为顶部。从零开始可以从零开始,但是如果我想从5开始呢?顶部相同,如果我想显示5至90的范围怎么办?我想知道是否有人对这张图有更多的了解或使用其他可以做这些事情的东西? thanks
I添加了一个具有一个值的新数据集,这是我希望它在图表上显示的高度值,我给它一个属性
withDots: false
datasets: [
{
data: [20, 50, 79], // my graph data
},
{
data: [200], //highest graph value
withDots: false, //a flage to make it hidden
},
],
解决方法是做以下事情:
fromZero
道;
formatYLabel
const minValue = 5;
const maxValue = 90;
function* yLabel() {
yield* [minValue, '', maxValue];
}
const d = [10, 5, 90, 30, 20, 10, 80];
const datapoints = d.map((datapoint) => datapoint - minValue - 1);
const data = {
labels: ['Sat', 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
datasets: [
{
data: datapoints,
},
],
};
const CustomChart = () => {
const screenWidth = Dimensions.get('window').width;
const yLabelIterator = yLabel();
return (
<View>
<LineChart
data={data}
segments={2}
width={screenWidth}
height={220}
bezier
fromZero
chartConfig={{
color: (opacity = 3) => `rgba(200, 255, 255, ${opacity})`,
data: data.datasets,
}}
formatYLabel={() => yLabelIterator.next().value}
/>
</View>
);
};
1
0
此外,请注意,图表的数量在这里很重要。如果您想拥有
fromZero
标签,则应该有
segments
段。 如上示例,标签是该规则的例外。具有
3
标签和2
段不起作用。该示例中显示的解决方法是具有2
标签和2
段,但要使中间标签为空字符串。
a的警告总体上是您的数据阵列中无法具有高于最大标签值的值。i我能够使用
1
和min,最大为数据集来完成此操作。您可以具有回调函数来渲染点,索引和数据值在此函数中返回,并且可以检查原始数据集中是否存在该值。因为原始数据集中的最小值和最大值永远不会存在,因此返回-1,您可以使用该逻辑使这些点透明。
示例:
3
GetDotProps= {(datapoint,index)=> { 返回 { R:“ 6”, 中风:“ 2”, 中风: ChartData.indexof(index)== -1 ?
2
getDotProps
//使其透明
: '红色的',
};
}}我们可以通过或将其他任何道具从控制