О чартах в Реакции-Родной - PullRequest
Новая
       20

О чартах в Реакции-Родной

0 голосов
/ 03 июля 2018

Я работаю над проектом, в котором я использую диаграммы реактивного натива. «Кольцевая диаграмма», которую я использую, по умолчанию принимает 100% за завершение круга. Я пробовал «Круг прогресса», в котором прогресс для завершения определенного круга равен «1». Есть ли альтернатива, чтобы изменить это значение прогресса этих графиков, чтобы установить пользовательское значение, которое я хочу?

введите описание изображения здесь

Ниже я привел примеры изображений круга прогресса, которые принимают только 1 как прогресс i, e. завершить круг введите описание изображения здесь

1 Ответ

0 голосов
/ 03 июля 2018

Вы можете визуализировать фигуры в React Native, используя React-Native ART 

Import { Art } from 'react-native';
const { Shape, Group Surface } = ART;

Вы можете создавать фигуры, используя пакет 'd3-shape' npm https://github.com/d3/d3-shape/blob/master/README.md.

D3-форма даст вам «путь». например: 

var arc = d3.arc()
.innerRadius(0)
.outerRadius(100)
.startAngle(0)
.endAngle(Math.PI / 2);

Когда вы выполните эту функцию, она вернет длинную строку букв и цифр, которые можно использовать для рисования вашей фигуры.

Просто поместите его в форму React-Native ART примерно так: 

render() {
    return (
        <Surface>
           <Group>
              <Shape d={arc()} /.
           </Group>
        </Surface>
     )
   }

Также это хорошая статья: https://hswolff.com/blog/react-native-art-and-d3/

...