Plotly. js в относительных столбцах метки перекрываются, когда оба столбца имеют значение 0 - PullRequest
4 голосов
/ 07 мая 2020

Продолжите мое путешествие с Plotly. js. Я использую относительный режим шкалы , и мне нужно показать настраиваемый текст, когда обе противоположные полоски имеют значение 0. Проблема в том, что для значения 0 обе полосы растут в одном направлении, а метки перекрываются: enter image description here

Единственное решение, о котором я думал, это проверка, когда значение равно 0 и динамически измените его на что-то вроде -0.009 и вручную отобразите правильное значение, хотя оно на самом деле неверно. Но это громоздкое решение, и диаграмма продолжает отображать крошечную полосу для тех значений, которые неприемлемы.

Это мой пример на Codepen

Можно ли контролировать направление надписи вручную? Спасибо.

1 Ответ

0 голосов
/ 12 мая 2020

Начальные мысли

Одно из решений - указать базовый параметр для каждой трассы как 0, а для отрицательных столбцов использовать отрицательное базовое значение, если значение равно 0.

      const altbase=-1000/3;

      const trace1 = {
        x: xValue,
        y: [FN],
        name: `Model 1`,
        text: `${FN} <br> FN`,
        type: 'bar',
        base: 0,
        textposition: 'outside'
      };
      const trace2 = {
        x: xValue,
        y: [-TN],
        name: 'Model 1',
        text: `${TN} <br> TN`,
        base: altbase,
        type: 'bar',
        textposition: 'outside'
      };

It похоже, что -max_y_lim / 3 приводит к хорошему смещению, для чего используется altbase.

Вы также можете определить altbase как переменную, проверяющую, если TN == 0:

var altbase = ((TN==0) ? -FP/3 : 0);

UPDATE1: или вы можете обойти переменную и поместить оператор if прямо в определение трассировки, например base: ((TN==0) ? -FP/3 : 0),

UPDATE2:, и немного более элегантное уравнение для смещения будет:

var altbase = ((TN==0) ? -1.4/4*Math.max(FN,TN,TP,FP) : 0);

Окончательное обновление

После некоторых размышлений, вероятно, лучше всегда вычислять altbase, чтобы он был доступен для другого потенциального отрицательного бара, а затем использовать оператор if для установки base: там, где это необходимо.

      var altbase = -1.4/4*Math.max(FN,TN,TP,FP);

      const trace1 = {
        x: xValue,
        y: [FN],
        name: `Model 1`,
        text: `${FN} <br> FN`,
        type: 'bar',
        base: 0,
        textposition: 'outside'
      };
      const trace2 = {
        x: xValue,
        y: [-TN],
        name: 'Model 1',
        text: `${TN} <br> TN`,
        base: ((TN==0) ? altbase : 0),
        type: 'bar',
        textposition: 'outside'
      };

Здесь - реализация в CodePen.

enter image description here

...