React Native. Существует ли библиотека диаграмм, позволяющая добавлять несколько представлений данных разных типов в одну диаграмму? - PullRequest
Новая
       7

React Native. Существует ли библиотека диаграмм, позволяющая добавлять несколько представлений данных разных типов в одну диаграмму?

0 голосов
/ 21 марта 2020

Я хотел бы найти библиотеку диаграмм в React Native, которая позволяет мне отображать нормальную линейную диаграмму, но затем добавить к ней несколько дополнительных деталей, например: две горизонтальные линии, отображаемые по всей диаграмме (не только как метки), представляющие нижний и верхний пределы, или вертикальную линию, представляющую «текущее время» на линейном графике точек данных на основе времени.

Кажется, что каждая библиотека диаграмм для RN ​​ограничена только рендерингом несколько наборов данных для одного и того же типа диаграммы (ie: несколько линий на линейном графике), или, может быть, я просто не знаю, как они работают достаточно хорошо, чтобы делать то, что я хочу сделать?

Плохо копировать из того, что я имею в виду:

enter image description here

1 Ответ

2 голосов
/ 21 марта 2020

Да, вы можете сделать это с react-native-svg-charts. Вы можете посетить пакет примеров react-native-svg-charts-examples для соответствующих образцов.

В частности, этот пример показывает, как нарисовать линейную диаграмму со встроенной горизонтальной пунктирной линией. Код из примера скопирован ниже ( Лицензия MIT ): 

import React from 'react'
import { LineChart, Grid } from 'react-native-svg-charts'
import * as shape from 'd3-shape'
import { Circle, G, Line, Rect, Text } from 'react-native-svg'

class ExtrasExample extends React.PureComponent {

    render() {

        const data = [ 50, 10, 40, 95, -4, -24, 85, 91, 35, 53, -53, 24, 50, -20, -80 ]

        /**
         * Both below functions should preferably be their own React Components
         */

        const HorizontalLine = (({ y }) => (
            <Line
                key={ 'zero-axis' }
                x1={ '0%' }
                x2={ '100%' }
                y1={ y(50) }
                y2={ y(50) }
                stroke={ 'grey' }
                strokeDasharray={ [ 4, 8 ] }
                strokeWidth={ 2 }
            />
        ))

        const Tooltip = ({ x, y }) => (
            <G
                x={ x(5) - (75 / 2) }
                key={ 'tooltip' }
                onPress={ () => console.log('tooltip clicked') }
            >
                <G y={ 50 }>
                    <Rect
                        height={ 40 }
                        width={ 75 }
                        stroke={ 'grey' }
                        fill={ 'white' }
                        ry={ 10 }
                        rx={ 10 }
                    />
                    <Text
                        x={ 75 / 2 }
                        dy={ 20 }
                        alignmentBaseline={ 'middle' }
                        textAnchor={ 'middle' }
                        stroke={ 'rgb(134, 65, 244)' }
                    >
                        { `${data[5]}ºC` }
                    </Text>
                </G>
                <G x={ 75 / 2 }>
                    <Line
                        y1={ 50 + 40 }
                        y2={ y(data[ 5 ]) }
                        stroke={ 'grey' }
                        strokeWidth={ 2 }
                    />
                    <Circle
                        cy={ y(data[ 5 ]) }
                        r={ 6 }
                        stroke={ 'rgb(134, 65, 244)' }
                        strokeWidth={ 2 }
                        fill={ 'white' }
                    />
                </G>
            </G>
        )

        return (
            <LineChart
                style={{ height: 200 }}
                data={ data }
                svg={{
                    stroke: 'rgb(134, 65, 244)',
                    strokeWidth: 2,
                }}
                contentInset={{ top: 20, bottom: 20 }}
                curve={ shape.curveLinear }
            >
                <Grid/>
                <HorizontalLine/>
                <Tooltip/>
            </LineChart>
        )
    }

}

export default ExtrasExample
...