Как правильно обрабатывать отрицательные значения на линейном графике с использованием response-native-svg - PullRequest
Новая
       28

Как правильно обрабатывать отрицательные значения на линейном графике с использованием response-native-svg

0 голосов
/ 23 апреля 2019

У меня возникли проблемы при попытке обработать данные бюджета, чтобы они отображались на графике. При использовании response-native-svg холст работает от 0 до 300, где 150 представляет нулевую линию. Таким образом, все, что выше этой строки, является положительными числами, а ниже - отрицательными числами.

Я могу обрабатывать данные, по большей части, все в порядке, но фактическая математика бросает меня в тупик.

Пример данных: 

const Income = [200, 945, 1300, 1400];
const Expenses = [100, 900, 1400, 1200];
const Balance = [100, 45, -100, 200];

Первое, что я делаю, это нормализую / масштабирую данные в моем диапазоне 0-300, но я почти уверен, что делаю это неправильно.

Вот что у меня есть: https://codesandbox.io/s/ymqwvxyy69

Вы можете видеть, что это вроде работает, но я знаю, что моя математика не верна.

Есть ли у кого-нибудь какие-либо рекомендации или предложения о том, как лучше или точнее обрабатывать эти данные?

Заранее спасибо.

1 Ответ

1 голос
/ 23 апреля 2019

Так что есть несколько вещей, с которыми нужно быть осторожным.

  1. Не имеет смысла вычислять минимальное, максимальное и норму для каждой "линии" отдельно
  2. Я бы рекомендовал использовать MinMax Scaling вместо стандартизации
  3. SVGsвы используете систему координат изображения, поэтому вам нужно инвертировать все ваши значения

MinMax Scaling: 

//calculate global absolute maximum. The maximum equals 150points 
const newGlobalArray = [ ...ylineIncome, ...ylineExpenses, ...ylineBalance]
    var absMax = newGlobalArray.reduce(function(max, item){
      return Math.max(Math.abs(max),Math.abs(item));
});
// Apply norm
const minMaxNorm = array => {
  let norm;
  for (let i = 0; i < array.length; i++) {
    norm = (array[i] / absMax) * 150;
    array[i] = norm;
  }
}

Инвертирование:

Система координат изображения начинается с (y: 0, x: 0) в верхнем левом углу (см. Изображение ниже).Система координат, которую мы ожидаем, берет свое начало в системе координат изображения в точке (y: 150, x: 0).Таким образом, вы можете изменить свою функцию invertValue на: 

const invertValue = value => {
  return (value * -1 + 150);
};

enter image description here

Вот полный код: https://codesandbox.io/s/j72pyopp15

...