如何使用Google图表在条形图的顶部插入点？

问题描述投票：1回答：1

给出插图

我能够使用以下代码创建图表（不包含点）：

<html>
  <head>
      <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['bar']});
      google.charts.setOnLoadCallback(drawStuff);

      var chart;

      function drawStuff() {
        var data = new google.visualization.arrayToDataTable([
          ['Y', 'Series 1','Series 2'],
          ["Element A", 44,11],
          ["Element B", 31,11],
          ["Element C", 12,11],
        ]);

        var options = {
          bars: 'horizontal', // Required for Material Bar Charts.
          axes: {
            x: {
              0: { side: 'bottom', label: 'X'} // Top x-axis.
            }
          }
        };

        var div = document.getElementById('top_x_div');
        var link = document.getElementById('url');
        chart = new google.charts.Bar(div);
        chart.draw(data, options);
        //console.log(chart.getImageURI());
      };
    </script>
  </head>
  <body>
    <div id="top_x_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

如何使用Google图表在条形图的顶部插入点？

javascript charts google-visualization

1个回答

0
投票

我想到了几种方法来完成...

使用组合图
在图表的'ready'事件上手动添加点

但是，使用material图表无法实现任何选择。

google.charts.Bar

首先，材料图表不支持组合图表。并且，material图表没有手动添加点所必需的methods。

更不用说，material图表也不支持几个选项。参见-> Tracking Issue for Material Chart Feature Parity #2143

所以我们必须使用经典图表...

google.visualization.BarChart

我们可以使用一个选项为classic图表赋予like外观和感觉，就像material图表...

theme: 'material'

现在是解决方案...

[尝试使用组合图时，这两个点之间的点与y轴对齐。没有一个选项可以使这些点对齐这些条。因此我们必须在图表的'ready'事件上手动添加点...我们需要的图表methods很少...

getChartLayoutInterface()-返回一个对象，其中包含有关图表及其元素在屏幕上的位置的信息。
getBoundingBox(id)-返回一个对象，其中包含图表元素ID的左侧，顶部，宽度和高度。
getXLocation(position, optional_axis_index)-返回相对于图表容器的位置的屏幕x坐标。
一旦图表的'ready'事件触发，我们就可以使用-> getChartLayoutInterface()来获得布局界面。
上述其他两种方法是布局接口的方法。

我们使用getBoundingBox(id)获取将在其上放置点的条的坐标。这将给我们Y坐标和点的高度。条形的ID由数据行和系列列确定。

bar#R#C // where R is the row index, and C is the series column index

我们提供X坐标，getXLocation将在图表上的预定位置提供将点放置在x轴上所需的位置。 // x coordinates of points to add
var points = [
  [36, 8],
  [28, 8],
  [10, 8],
];

// loop data rows and columns
for (var r = 0; r < data.getNumberOfRows(); r++) {
  for (var c = 1; c < data.getNumberOfColumns(); c++) {
    // calculate position of the point
    var barBounds = chartLayout.getBoundingBox('bar#' + (c - 1) + '#' + r);
    var point = document.createElementNS(svgNS, 'circle');
    var xCoord = chartLayout.getXLocation(points[r][c - 1]);
    var height = barBounds.height / 4;
    var top = barBounds.top + (height * 2);

    // create and add the point to the chart
    point.setAttribute('cx', xCoord);
    point.setAttribute('cy', top);
    point.setAttribute('r', height);
    point.setAttribute('stroke', '#ffffff');
    point.setAttribute('stroke-width', 8);
    point.setAttribute('fill', 'transparent');
    svg.appendChild(point);
  }
}

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

var chart;

google.charts.load('current', {
  packages: ['corechart']
}).then(function drawStuff() {
  var data = new google.visualization.arrayToDataTable([
    ['Y', 'Series 1', 'Series 2'],
    ['Element A', 44, 11],
    ['Element B', 31, 11],
    ['Element C', 12, 11],
  ]);

  // x coordinates of points to add
  var points = [
    [36, 8],
    [28, 8],
    [10, 8],
  ];

  var options = {
    chartArea: {
      left: 128,
      top: 24,
      right: 128,
      bottom: 72,
      height: '100%',
      width: '100%'
    },
    hAxis: {
      title: 'X'
    },
    height: '100%',
    theme: 'material',
    vAxis: {
      title: data.getColumnLabel(0)
    },
    width: '100%'
  };

  var div = document.getElementById('top_x_div');
  //var link = document.getElementById('url');

  chart = new google.visualization.BarChart(div);

  google.visualization.events.addListener(chart, 'ready', function () {
    // get chart layour interface and svg
    var chartLayout = chart.getChartLayoutInterface();
    var svg = div.getElementsByTagName('svg')[0];
    var svgNS = svg.namespaceURI;

    // loop data rows and columns
    for (var r = 0; r < data.getNumberOfRows(); r++) {
      for (var c = 1; c < data.getNumberOfColumns(); c++) {
        // calculate position of the point
        var barBounds = chartLayout.getBoundingBox('bar#' + (c - 1) + '#' + r);
        var point = document.createElementNS(svgNS, 'circle');
        var xCoord = chartLayout.getXLocation(points[r][c - 1]);
        var height = barBounds.height / 4;
        var top = barBounds.top + (height * 2);

        // create and add the point to the chart
        point.setAttribute('cx', xCoord);
        point.setAttribute('cy', top);
        point.setAttribute('r', height);
        point.setAttribute('stroke', '#ffffff');
        point.setAttribute('stroke-width', 8);
        point.setAttribute('fill', 'transparent');
        svg.appendChild(point);
      }
    }
  });

  chart.draw(data, options);
  window.addEventListener('resize', function () {
    chart.draw(data, options);
  });
});

#top_x_div {
  height: 400px;
}<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="top_x_div"></div>

最新问题

© www.soinside.com 2019 - 2024. All rights reserved.