在带有负值的条形图上移动注释Google Chart

Question

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

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

我希望图表的负片部分的注释与栏的末端位于同一侧（就像正片一样，见下图，绿色框是我想要注释的地方）。 / p>

我似乎无法找到有关如何实现这一目标的任何文件。

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

Answer 1

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

但你可以手动移动它们

然而，图表实际上会在活动发生时将其移回，
例如关于酒吧悬停
必须使用MutationObserver或其他东西来保持它们

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

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

请参阅以下工作代码段...

＆＃13;

＆＃13;

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']
});

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;