有没有一种方法可以在胜利折线图的最后一个数据点上绘制一个点以进行本机反应

Question

所以目前我有这个作为胜利在线聊天的代码

import React from 'react';
import { View, StyleSheet } from 'react-native';
import { VictoryLine, VictoryChart } from 'victory-native'

let data = [
    {
        x: 1,
        y: 0
    },
    {
        x: 2,
        y: 0
    },
    {
        x: 3,
        y: 0
    },
    {
        x: 4,
        y: 70
    },
    {
        x: 5,
        y: 73
    },
    {
        x: 5,
        y: 73
    },
    {
        x: 5,
        y: 73
    },
    {
        x: 5,
        y: 73
    }
]

export default function Graph() {
    return (
        
    <VictoryLine style={styles.graph} height={150} width={350} data={data} style={{data: {stroke: 'orange', strokeWidth: 2.5}}} />
  
    )
}

const styles = StyleSheet.create({
    graph: {
        marginRight: 0
    }
})

这给了我一个看起来像 this 的折线图。有没有办法：

A) 在线上为每个数据点绘制虚线点

B) 只需在数据列表中点上最后一个数据点。 I want to achieve

的示例图片

Answer 1

您可以用 VictroyChart 包裹您的 VictoryLine 并隐藏轴，像这样 sample

  <View>
    <VictoryChart polar={this.state.polar} height={390}>
      <VictoryAxis style={{ 
        axis: {stroke: "transparent"}, 
        ticks: {stroke: "transparent"},
        tickLabels: { fill:"transparent"} 
      }} />
      <VictoryLine
        interpolation={this.state.interpolation} data={data}
        style={{ data: { stroke: "#c43a31" } }}
      />
      <VictoryScatter data={[data[data.length-1]]}
        size={5}
        style={{ data: { fill: "#c43a31" } }}
      />
    </VictoryChart>
  </View>

有没有一种方法可以在胜利折线图的最后一个数据点上绘制一个点以进行本机反应

Is there a way to plot a dot on just the last data point on a victory line chart for react native

reactjs

react-native

victory-charts

victory-native