Google Charts не отображает ярлык вне полосы, когда полоса слишком мала - PullRequest
Новая
       74

Google Charts не отображает ярлык вне полосы, когда полоса слишком мала

1 голос
/ 30 апреля 2020

Мне бы хотелось, чтобы моя гистограмма Google отображала метку гистограммы вне полосы, когда метка слишком велика, чтобы уместиться внутри. Похоже, это должно быть поведение по умолчанию, но мои графики не работают таким образом. Вот скриншот проблемы, когда код отображается. Вы можете увидеть этот вопрос в строках 2,3,5,7 и 8.

Bar Labels not outside of bar

Вот мой код: 

// START Disease Resistance
function disease() {
  var data = google.visualization.arrayToDataTable([
    ['Disease', 'Resistance Rating', { role: 'annotation'}, { role: 'style'}, { role: 'tooltip'}],

    ['Barley Yellow Dwarf', 5, '5', '#221f72', 'Barley Yellow Dwarf | Resistance Rating: 5'], // Resistance rating is calculated by subracting the value from 10
    ['Fusarium Head Blight', 1, '9', '#221f72', 'Fusarium Head Blight | Resistance Rating: 9'],
    ['Hessian Fly', 1, '9', '#221f72', 'Hessian Fly | Resistance Rating: 9'],
    ['Leaf Rust', 2, '8', '#221f72', 'Leaf Rust | Resistance Rating: 8'],
    ['Powdery Mildew', 1, '9', '#221f72', 'Powdery Mildew | Resistance Rating: 9'],
    ['Soil-Borne Mosaic', 4, '6', '#221f72', 'Soil-Borne Mosaic | Resistance Rating: 6'],
    ['Stem Rust', 1, '9', '#221f72', 'Stem Rust | Resistance Rating: 9'],
    ['Stripe Rust', 1, '9', '#221f72', 'Stripe Rust | Resistance Rating: 9'],
    ['Tan Spot', 5, '5', '#221f72', 'Tan Spot | Resistance Rating: 5'],
    ['Wheat Streak Mosaic', 5, '5', '#221f72', 'Wheat Streak Mosaic | Resistance Rating: 5'],

  ]);
  var paddingHeight = 80;
  var rowHeight = data.getNumberOfRows() * 80;
  var chartHeight = rowHeight + paddingHeight;

  var options = {
      'backgroundColor': 'transparent',
    annotations: {textStyle: {fontSize: 16, fontName: 'Source Sans Pro'}},
    legend: { position: 'none'},
    height: chartHeight,
    colors: ['#F4AA00'],
    chartArea: {
      width: '100%',
      height: rowHeight
    },
    hAxis: {
        ticks: [{v:1, f:'9'}, {v:2, f:'8'}, {v:3, f:'7'}, {v:4, f:'6'}, {v:5, f:'5'}, {v:6, f:'4'}, {v:7, f:'3'}, {v:8, f:'2'}, {v:9, f:'1'}, {v:10, f:'0'}],
      title: '7-9 Susceptible | 4-6 Intermediate | 1-3 Resistant',
        viewWindow: {
        min: 0,
        max: 10
    },
      minValue: 0,
      textStyle: {
        fontName: 'Source Sans Pro',
          bold: true,
        fontSize: 12,
        color: '#4d4d4d'
      },
      titleTextStyle: {
        fontName: 'Source Sans Pro',
          bold: true,
        fontSize: 14,
        color: '#4d4d4d'
      }
    },
    vAxis: {
        textPosition: 'in',
      title: 'Disease',
      textStyle: {
        fontName: 'Source Sans Pro',
          fontSize: 14,
        bold: false,
        color: '#fff'
      },
      titleTextStyle: {
        fontName: 'Source Sans Pro',
          fontSize: 14,
        bold: true,
        color: '#848484'
      }
    }
  };
  var chart = new google.visualization.BarChart(document.getElementById('disease'));
  chart.draw(data, options);

    // redraw charts responsively
    (function($) {
        function resizeCharts () {
        chart.draw(data, options);
        }
        $(window).resize(resizeCharts);
    })( jQuery );
}
// END Disease Resistance

Спасибо!

Ответы [ 2 ]

1 голос
/ 02 мая 2020

Спасибо @ WhiteHat, я ценю подробный ответ. В итоге я вложил информацию о болезни в аннотацию: 

['Disease', 'Resistance Rating', { role: 'annotation'}, { role: 'style'}, { role: 'tooltip'}],

    ['Barley Yellow Dwarf', 5, 'Barley Yellow Dwarf | 5', '#221f72', 'Barley Yellow Dwarf | Resistance Rating: 5'], // Resistance rating is calculated by subracting the value from 10
    ['Fusarium Head Blight', 1, 'Fusarium Head Blight | 9', '#221f72', 'Fusarium Head Blight | Resistance Rating: 9'],
    ['Hessian Fly', 1, 'Hessian Fly | 9', '#221f72', 'Hessian Fly | Resistance Rating: 9'],
    ['Leaf Rust', 2, 'Leaf Rust | 8', '#221f72', 'Leaf Rust | Resistance Rating: 8'],
    ['Powdery Mildew', 1, 'Powdery Mildew | 9', '#221f72', 'Powdery Mildew | Resistance Rating: 9'],
    ['Soil-Borne Mosaic', 4, 'Soil-Borne Mosaic | 6', '#221f72', 'Soil-Borne Mosaic | Resistance Rating: 6'],
    ['Stem Rust', 1, 'Stem Rust | 9', '#221f72', 'Stem Rust | Resistance Rating: 9'],
    ['Stripe Rust', 1, 'Stripe Rust | 9', '#221f72', 'Stripe Rust | Resistance Rating: 9'],
    ['Tan Spot', 5, 'Tan Spot | 5', '#221f72', 'Tan Spot | Resistance Rating: 5'],
    ['Wheat Streak Mosaic', 5, 'Wheat Streak Mosaic | 5', '#221f72', 'Wheat Streak Mosaic | Resistance Rating: 5'],

Затем я спрятал VAxis, используя существующее свойство textPosition 'none': 

    vAxis: {
        textPosition: 'none',
      ...etc.

Окончательный результат выглядит следующим образом : Fixed bar chart example

1 голос
/ 30 апреля 2020

очевидно, что следующая опция не работает хорошо ... 

vAxis.textPosition: 'in'

и единственная другая опция, которая может быть достаточной ... 

theme: 'maximized'

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

единственная другая опция, которую я придумал, - это добавить метку к аннотации.
и удалить из оси y.

это дает тот же результат, что и выше,
, но предотвращает наложение с аннотацией.

, а также вызывает еще одну проблему.
текст помещается в конце бара,
вместо начала.
для исправления, мы можем вручную перемещать аннотации, когда график 'ready' событие запускается.
, но диаграмма переместит их назад, в любой интерактивности, такой как "зависание / наведение мыши".
, таким образом, мы должны использовать MutationObserver, чтобы держать их на месте, в начале бара.

см. Следующий рабочий фрагмент ... 

google.charts.load('current', {
  packages: ['corechart']
}).then(disease);

function disease() {
  var data = google.visualization.arrayToDataTable([
    ['Disease', 'Resistance Rating', { role: 'annotation'}, { role: 'style'}, { role: 'tooltip'}],

    ['', 5, 'Barley Yellow Dwarf: 5', '#221f72', 'Barley Yellow Dwarf | Resistance Rating: 5'], // Resistance rating is calculated by subracting the value from 10
    ['', 1, 'Fusarium Head Blight: 9', '#221f72', 'Fusarium Head Blight | Resistance Rating: 9'],
    ['', 1, 'Hessian Fly: 9', '#221f72', 'Hessian Fly | Resistance Rating: 9'],
    ['', 2, 'Leaf Rust: 8', '#221f72', 'Leaf Rust | Resistance Rating: 8'],
    ['', 1, 'Powdery Mildew: 9', '#221f72', 'Powdery Mildew | Resistance Rating: 9'],
    ['', 4, 'Soil-Borne Mosaic: 6', '#221f72', 'Soil-Borne Mosaic | Resistance Rating: 6'],
    ['', 1, 'Stem Rust: 9', '#221f72', 'Stem Rust | Resistance Rating: 9'],
    ['', 1, 'Stripe Rust: 9', '#221f72', 'Stripe Rust | Resistance Rating: 9'],
    ['', 5, 'Tan Spot: 5', '#221f72', 'Tan Spot | Resistance Rating: 5'],
    ['', 5, 'Wheat Streak Mosaic: 5', '#221f72', 'Wheat Streak Mosaic | Resistance Rating: 5'],

  ]);
  var paddingHeight = 80;
  var rowHeight = data.getNumberOfRows() * 80;
  var chartHeight = rowHeight + paddingHeight;

  var options = {
    backgroundColor: 'transparent',
    annotations: {textStyle: {fontSize: 16, fontName: 'Source Sans Pro'}},
    legend: {position: 'none'},
    height: chartHeight,
    colors: ['#F4AA00'],
    chartArea: {
      width: '100%',
      height: rowHeight
    },
    hAxis: {
      ticks: [{v:1, f:'9'}, {v:2, f:'8'}, {v:3, f:'7'}, {v:4, f:'6'}, {v:5, f:'5'}, {v:6, f:'4'}, {v:7, f:'3'}, {v:8, f:'2'}, {v:9, f:'1'}, {v:10, f:'0'}],
      title: '7-9 Susceptible | 4-6 Intermediate | 1-3 Resistant',
      viewWindow: {
        min: 0,
        max: 10
      },
      minValue: 0,
      textStyle: {
        fontName: 'Source Sans Pro',
        bold: true,
        fontSize: 12,
        color: '#4d4d4d'
      },
      titleTextStyle: {
        fontName: 'Source Sans Pro',
        bold: true,
        fontSize: 14,
        color: '#4d4d4d'
      }
    },
    vAxis: {
      title: 'Disease',
      textStyle: {
        fontName: 'Source Sans Pro',
        fontSize: 14,
        bold: false
      },
      titleTextStyle: {
        fontName: 'Source Sans Pro',
        fontSize: 14,
        bold: true,
        color: '#848484'
      }
    }
  };
  var chart = new google.visualization.BarChart(document.getElementById('disease'));

  google.visualization.events.addListener(chart, 'ready', function () {
    var observer = new MutationObserver(moveAnnotations);
    observer.observe(chart.getContainer(), {
      childList: true,
      subtree: true
    });
  });

  function moveAnnotations() {
    var chartLayout = chart.getChartLayoutInterface();
    var chartBounds = chartLayout.getChartAreaBoundingBox();
    var barBounds = chartLayout.getBoundingBox('bar#0#0');
    var labels = chart.getContainer().getElementsByTagName('text');
    Array.prototype.forEach.call(labels, function(label, index) {
      if (label.getAttribute('font-size') === '16') {
        label.setAttribute('x', barBounds.left + chartBounds.left + 4);
        label.setAttribute('fill', 'magenta');
        label.setAttribute('text-anchor', 'start');
      }
    });
  }

  chart.draw(data, options);

    // redraw charts responsively
    (function($) {
        function resizeCharts () {
        chart.draw(data, options);
        }
        $(window).resize(resizeCharts);
    })( jQuery );
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="disease"></div>

примечание: не рекомендуется использовать 'magenta' в качестве цвета,
, но демонстрирует необходимость другого цвета ...

...