在带有负值Google图表的条形图上移动注释 [英] Moving annotations on Bar Chart with Negative Values Google Chart

问题描述

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

我希望图表底部的注释与条形的末端位于同一侧（就像正面一样，请参阅下图，绿色框是我要注释的位置） ）。

我似乎找不到任何

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

解决方案

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

但您可以手动移动它们

然而，每当活动发生时，图表实际上会将它们移回，例如在酒吧悬停时
hav e使用一个 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：{//为annotation viewWindow留出空间{min：data.getColumnRange （1）.min  -  1}}，图例：{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）; //移动注释var observer = new MutationObserver（function（）{$ .each（$（'text [text-anchor =start]'），function（index，label）{var labelValue = parseFloat（$（label） （（labelValue< 0）&&（$（label）.attr（'font-weight'）！=='bold'）; //只是否定的 - 和 - 不在工具提示if（ ））{var bounds = label.getBBox（）; var chartLayout = chart.getChartLayoutInterface（）; $（label）.attr（'x'，chartLayout.getXLocation（labelValue） -  bounds.width  -  8）;}}）; }）; observer.observe（容器，{childList：true，subtree：true}）; chart.draw（view，options）; }，packages：['corechart']}）;   
 

I am using google charts within an MVC project.

I am looking to implement a bar chart that has negative values.

I would like the annotations on the negative portion of the chart to be on the same side as the end of the bar (just like the positive, see image below, green box is where I would like annotations to be).

I cant seem to find any documentation on how this can be achieved.

Is it possible to move the annotation to the other side?

解决方案

there are no standard config options that will move the annotations

but you can move them manually

however, the chart will actually move them back whenever activity occurs,
such as on bar hover
have to use a MutationObserver, or something, to keep them there

use chart methods --> getChartLayoutInterface().getXLocation(value)
to find the location

also, need to adjust the axis window to leave room for the labels

see following working snippet...

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>

这篇关于在带有负值Google图表的条形图上移动注释的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！