javascript - 使用负值 Google Chart 在条形图上移动注释

Question

我在 MVC 项目中使用谷歌图表。

我希望实现一个具有负值的条形图。

我希望图表负数部分的注释与条形图的末端位于同一侧(就像正数一样，见下图，绿色框是我希望注释所在的位置)。

我似乎找不到任何关于如何实现这一点的文档。

是否可以将注释移到另一边？

Answer 1

没有可以移动注释的标准配置选项

但你可以手动移动它们

但是，图表实际上会在事件发生时将它们移回，
例如悬停在栏上
必须使用 MutationObserver 或其他东西来将它们保留在那里

使用图表方法 --> getChartLayoutInterface().getXLocation(value)
找到位置

另外，需要调整坐标轴窗口，为标签留出空间

请参阅以下工作片段...

google.charts.load('current', {
  callback: function () {
    var data = new google.visualization.DataTable({
      cols: [
        {label: 'x', type: 'string'},
        {label: 'y0', type: 'number'},
      ],
      rows: [
        {c:[{v: 'Omega'}, {v: -0.95}]},
        {c:[{v: 'Large'}, {v: -0.92}]},
        {c:[{v: 'Medium'}, {v: 2.76}]},
        {c:[{v: 'Tiny'}, {v: 2.03}]}
      ]
    });

    var options = {
      annotations: {
        alwaysOutside: true,
        stem: {
          color: 'transparent'
        },
        textStyle: {
          color: '#000000'
        }
      },
      hAxis: {
        // leave room for annotation
        viewWindow: {
          min: data.getColumnRange(1).min - 1
        }
      },
      legend: {
        position: 'none'
      }
    };

    var view = new google.visualization.DataView(data);
    view.setColumns([0, 1, {
      calc: 'stringify',
      sourceColumn: 1,
      type: 'string',
      role: 'annotation'
    }]);

    var container = document.getElementById('chart');
    var chart = new google.visualization.BarChart(container);

    // move annotations
    var observer = new MutationObserver(function () {
      $.each($('text[text-anchor="start"]'), function (index, label) {
        var labelValue = parseFloat($(label).text());
        // only negative -- and -- not on tooltip
        if ((labelValue < 0) && ($(label).attr('font-weight') !== 'bold')) {
          var bounds = label.getBBox();
          var chartLayout = chart.getChartLayoutInterface();
          $(label).attr('x', chartLayout.getXLocation(labelValue) - bounds.width - 8);
        }
      });
    });
    observer.observe(container, {
      childList: true,
      subtree: true
    });

    chart.draw(view, options);
  },
  packages: ['corechart']
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>