当条形图太小时，谷歌图表不会在栏外显示标签

Question

我想我的谷歌条形图显示酒吧外的标签，当标签太大，不适合在里面。看起来这应该是默认的行为，但我的图表并不是这样的。下面是代码呈现时问题的屏幕截图。您可以在第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'事件触发时手动移动注释。

但是，在任何交互作用下，如“悬停/鼠标移动”，图表都会将它们移回来。

因此，我们必须在条形图的开头使用一个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'],

然后，我使用现有的VAxis 'none‘属性隐藏了这个textPosition：

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

最终结果如下：

​