我想到了幾種方法，來完成...
使用組合圖
在圖表的事件上手動添加點'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 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 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>
