Google 当条形图太小时，图表不在条形图外显示标签

Question

我希望我的 Google 条形图在标签太大而无法放入条形图时在条形图外部显示条形图标签。看起来这应该是默认行为，但我的图表不是那样工作的。这是呈现代码时问题的屏幕截图。您可以在第 2、3、5、7 和 8 行中看到这个问题。

这是我的代码：

// 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

谢谢！

Answer 1

显然，以下选项效果不佳...

vAxis.textPosition: 'in'

唯一可能满足的其他选项...

theme: 'maximized'

允许文本溢出，超出栏。
这意味着一半的文本将在蓝色背景上，
其余的在白色背景上。
使用适当的字体颜色，这看起来 还可以 ，但也与注释重叠。

我想到的唯一其他选择是将标签添加到注释中。
并从 y 轴上移除。

这产生与上面相同的结果，
但防止与注释重叠。

并且还会导致另一问题。
文本放在栏的末尾，
而不是开始。
要更正，我们可以在图表的 'ready' 事件触发时手动移动注释。
但图表会将它们移回任何交互，例如 "hover / mouseover".
因此，我们必须使用 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'作为颜色，
但表明需要另一种颜色...

Answer 2

感谢@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'],

然后，我使用现有的 textPosition 'none' 属性:

隐藏了 VAxis

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

最终结果如下所示：

Google 当条形图太小时，图表不在条形图外显示标签

Google Charts not displaying label outside of bar when bar is too small

javascript

charts

google-visualization