javascript - 使用 Google Charts(组合图表)在其自己的栏上垂直居中注释

Question

是否可以将注释垂直居中放置在条形图上？它不能仅通过 annotation.stem.length 来实现。另一件事是使用 MutationObserver 设置注释的 y 位置，但我无法弄清楚如何获取栏的高度，所以我有引用我将在 y 属性上设置多少 y。有什么方法可以动态地将注释垂直居中放置在栏上吗？

google.charts.load("current", { packages: ["corechart", "bar"] });
google.charts.setOnLoadCallback(drawBVandBA);

function drawBVandBA() {
  var dataArr = [
    ["Month", "Book Orders", "Buying Accounts", "Throughput"],
    ["Jan", 200.25, 1253, 379.09],
    ["Feb", 533.39, 1253, 379.09],
    ["March", 564.79, 1123, 379.09],
    ["Apr", 475.66, 1154, 379.09],
    ["May", 564.75, 1203, 379.09],
    ["Jun", 200.23, 1189, 379.09],
    ["Jul", 475.66, 1201, 379.09],
    ["Aug", 513.43, 1228, 379.09],
    ["Sep", 423.77, 1175, 379.09],
    ["Oct", 399.88, 1024, 379.09],
    ["Nov", 546.47, 1243, 379.09],
    ["Dec", 435.65, 1209, 379.09]
  ];

  var data = google.visualization.arrayToDataTable(dataArr);

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

  var options = {
    animation: {
      duration: 1000,
      easing: "out",
      startup: true
    },
    annotations: {
      textStyle: {
        fontSize: 11,
        color: "black",
        auraColor: "none"
      }
    },
    chartArea: {
      backgroundColor: "#B9CDE5",
      right: "6%",
      width: "80%"
    },
    vAxes: {
      0: {
        viewWindowMode: "explicit",
        viewWindow: {
          max: 1400,
          min: 0
        },
        gridlines: {
          color: "transparent",
          count: 8
        }
      },
      1: {
        viewWindow: {
          max: 600,
          min: 0
        },
        gridlines: {
          color: "transparent",
          count: 7
        }
      }
    },
    series: {
      0: {
        annotations: {
          stem: {
            length: 80
          }
        },
        targetAxisIndex: 1,
        color: "#4F81BD",
        type: "bars"
      },
      1: {
        annotations: {
          stem: {
            length: 7
          }
        },
        type: "line",
        targetAxisIndex: 0,
        color: "#C0504D",
        pointShape: "square",
        pointsVisible: true
      }
    },
    backgroundColor: "#8064A2",
    legend: {
      position: "top",
      alignment: "start"
    }
  };

  var container = document.getElementById("bv_and_ba");
  var chart = new google.visualization.ColumnChart(container);

  chart.draw(view, options);

}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="bv_and_ba" style="width: 100%; height: 300px;"></div>

Answer 1

有一个图表方法 --> chart.getChartLayoutInterface()

这会返回一个对象，它有自己的方法 --> getBoundingBox
它需要一个 id 字符串

条形元素的 id 字符串 = bar#series number#row number
第一个系列中的第一个柱 = bar#0#0

获取条的高度 --> chartLayout.getBoundingBox('bar#0#0')

一旦我们有了高度，我们就可以移动注释了

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

google.charts.load("current", { packages: ["corechart", "bar"] });
google.charts.setOnLoadCallback(drawBVandBA);

function drawBVandBA() {
  var dataArr = [
    ["Month", "Book Orders", "Buying Accounts", "Throughput"],
    ["Jan", 200.25, 1253, 379.09],
    ["Feb", 533.39, 1253, 379.09],
    ["March", 564.79, 1123, 379.09],
    ["Apr", 475.66, 1154, 379.09],
    ["May", 564.75, 1203, 379.09],
    ["Jun", 200.23, 1189, 379.09],
    ["Jul", 475.66, 1201, 379.09],
    ["Aug", 513.43, 1228, 379.09],
    ["Sep", 423.77, 1175, 379.09],
    ["Oct", 399.88, 1024, 379.09],
    ["Nov", 546.47, 1243, 379.09],
    ["Dec", 435.65, 1209, 379.09]
  ];

  var data = google.visualization.arrayToDataTable(dataArr);

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

  var options = {
    animation: {
      duration: 1000,
      easing: "out",
      startup: true
    },
    annotations: {
      textStyle: {
        fontSize: 11,
        color: "black",
        auraColor: "none"
      }
    },
    chartArea: {
      backgroundColor: "#B9CDE5",
      right: "6%",
      width: "80%"
    },
    vAxes: {
      0: {
        viewWindowMode: "explicit",
        viewWindow: {
          max: 1400,
          min: 0
        },
        gridlines: {
          color: "transparent",
          count: 8
        }
      },
      1: {
        viewWindow: {
          max: 600,
          min: 0
        },
        gridlines: {
          color: "transparent",
          count: 7
        }
      }
    },
    series: {
      0: {
        annotations: {
          stem: {
            color: 'transparent',
            length: 0
          }
        },
        targetAxisIndex: 1,
        color: "#4F81BD",
        type: "bars"
      },
      1: {
        annotations: {
          stem: {
            length: 7
          }
        },
        type: "line",
        targetAxisIndex: 0,
        color: "#C0504D",
        pointShape: "square",
        pointsVisible: true
      }
    },
    backgroundColor: "#8064A2",
    legend: {
      position: "top",
      alignment: "start"
    }
  };

  var container = document.getElementById("bv_and_ba");
  var chart = new google.visualization.ColumnChart(container);

  var annotations = [];
  var chartLayout;
  var annotationsReady = false;

  // get annotation text for element identification
  google.visualization.events.addListener(chart, 'ready', function () {
    chartLayout = chart.getChartLayoutInterface();
    for (var i = 0; i < view.getNumberOfRows(); i++) {
      annotations.push(view.getValue(i, 2));
    }
  });

  // wait until annotations are ready to move
  google.visualization.events.addListener(chart, 'animationfinish', function () {
    annotationsReady = true;
    moveAnnotations();
  });

  function moveAnnotations() {
    // ensure annotations are ready
    if (!annotationsReady) {
      return;
    }

    // move annotations
    Array.prototype.forEach.call(container.getElementsByTagName('text'), function(annotation) {
      // exclude other labels
      if (annotation.getAttribute('text-anchor') === 'middle') {
        var annotationTop;
        var barBounds;

        // check if annotation to be moved
        var rowIndex = annotations.indexOf(annotation.textContent);
        if (rowIndex > -1) {
          // get bar bounds
          barBounds = chartLayout.getBoundingBox('bar#0#' + rowIndex);
          // calculate annotation position
          annotationTop = barBounds.top + (barBounds.height / 2) + (annotation.getBBox().height / 2);
          // move annotation
          annotation.setAttribute('y', annotationTop);
        }
      }
    });
  }

  // prevent chart from moving annotations back to original position
  var observer = new MutationObserver(moveAnnotations);
  observer.observe(container, {
    childList: true,
    subtree: true
  });

  chart.draw(view, options);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="bv_and_ba" style="width: 100%; height: 300px;"></div>