如何使用谷歌图表在条形图顶部插入点？
给定插图
我能够使用以下代码创建图表（没有点）：
<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>
如何使用谷歌图表在条形图顶部插入点？
天涯尽头无女友浏览 144回答 1
1回答
-
蝴蝶不菲
我想到了几种方法，来完成...使用组合图在图表的事件上手动添加点'ready'但是，使用材料图表无法实现这两个选项。google.charts.Bar首先，材料图表不支持组合图表。并且，材料图表没有手动添加点所需的方法。更不用说，还有几种选项是材料图表不支持的。请参见 --> 材料图表特征奇偶校验的跟踪问题 #2143所以我们必须使用经典的图表...google.visualization.BarChart我们可以使用一个选项来使经典图表具有与材料图表相似的外观和感觉......theme: 'material'现在的解决方案...尝试使用组合图时，这些点与两条形之间的 y 轴对齐。没有一个选项可以允许点在条形上对齐。因此，我们必须在图表的事件上手动添加点...'ready'我们需要的图表方法很少...getChartLayoutInterface()- 返回一个对象，其中包含有关图表及其元素在屏幕上的位置的信息。getBoundingBox(id)- 返回包含图表元素 id 的左、顶、宽和高的对象。getXLocation(position, optional_axis_index)- 返回相对于图表容器的位置的屏幕 x 坐标。一旦图表的事件触发，我们可以使用 -->'ready'getChartLayoutInterface()上面提到的另外两种方法是布局界面的方法。我们用来获取柱的坐标，该点将被放置在该柱上。这将给我们Y坐标和点的高度。条形图的 id 由数据行和序列列确定。getBoundingBox(id)bar#C#R // where C is the series column index, and R is the row index我们提供X坐标，将提供图表上的位置，需要将点放在x轴上，在我们预定的位置。getXLocation// x coordinates of points to addvar points = [ [36, 8], [28, 8], [10, 8],];// loop data rows and columnsfor (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 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 var point = document.createElementNS(svgNS, 'circle'); point.setAttribute('cx', xCoord); point.setAttribute('cy', top); point.setAttribute('r', height); point.setAttribute('stroke', '#ffffff'); point.setAttribute('stroke-width', height); 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 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 var point = document.createElementNS(svgNS, 'circle'); point.setAttribute('cx', xCoord); point.setAttribute('cy', top); point.setAttribute('r', height); point.setAttribute('stroke', '#ffffff'); point.setAttribute('stroke-width', height); 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>
随时随地看视频慕课网APP
相关分类
JavaScript