向Google燭台圖添加注釋（發布的解決方案觸發TypeError）

Question

我正在嘗試向Google燭台圖表添加一些注釋。 我注意到有人已經問過同樣的問題（ 向Google Candlestick圖表添加注釋 ）。 用戶Aperçu答復了詳細的解決方案，以擴展圖表並添加注釋，因為圖表沒有內置任何此類功能。但是，當我嘗試此解決方案時，出現錯誤“ TypeError：document.querySelectorAll（...） [0]未定義”

這是我的代碼：

        chartPoints = [
            ['Budget', 0, 0, 9999, 9999, 'foo1'],
            ['Sales', 0, 0, 123, 123, 'foo2'],
            ['Backlog', 123, 123, 456, 456, 'foo3'],
            ['Hard Forecast', 456, 456, 789, 789, 'foo4'],
            ['Sales to Budget', 789, 789, 1000, 1000, 'foo5']
        ];
        var data = google.visualization.arrayToDataTable(chartPoints, true);
        data.setColumnProperty(5, 'role', 'annotation');
        var options = {
            legend: 'none',
            bar: { groupWidth: '40%', width: '100%' },
            candlestick: {
                fallingColor: { strokeWidth: 0, fill: '#a52714' },
                risingColor: { strokeWidth: 0, fill: '#0f9d58' }
            }
        };    

        var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div'));
        chart.draw(data, options);

        // attempt to use Aperçu's solution
        const bars = document.querySelectorAll('#chart_div svg > g:nth-child(5) > g')[0].lastChild.children // this triggers a TypeError
        for (var i = 0 ; i < bars.length ; i++) {
          const bar = bars[i]
          const { top, left, width } = bar.getBoundingClientRect()
          const hint = document.createElement('div')
          hint.style.top = top + 'px'
          hint.style.left = left + width + 5 + 'px'
          hint.classList.add('hint')
          hint.innerText = rawData.filter(t => t[1])[i][0]
          document.getElementById('chart_div').append(hint)
        }

我希望圖表在條形旁邊顯示最后一條數據（即“ foo1”，“ foo2”等）

Answer 1

每個蠟燭或條形圖將由<rect>元素表示

我們可以使用上升和下降顏色將條形圖與圖表中的其他<rect>元素分開

條形數量將與數據表中的行數相同

一旦找到第一個柱，就可以使用零的rowIndex從數據中提取值

我們需要找到上升/下降的值，才能知道注釋的位置

然后使用圖表方法找到注釋的位置

getChartLayoutInterface() -返回一個對象，其中包含有關圖表及其元素在屏幕上的位置的信息。

getYLocation(position, optional_axis_index) -返回相對於圖表容器的位置的屏幕y坐標。

請參閱以下工作片段
添加了兩個注釋
一個代表上升和下降的差異
另一個用於具有注釋角色的列中的值

 google.charts.load('current', { callback: drawChart, packages: ['corechart'] }); function drawChart() { var chartPoints = [ ['Budget', 0, 0, 9999, 9999, 'foo1'], ['Sales', 0, 0, 123, 123, 'foo2'], ['Backlog', 123, 123, 456, 456, 'foo3'], ['Hard Forecast', 456, 456, 789, 789, 'foo4'], ['Sales to Budget', 789, 789, 1000, 1000, 'foo5'] ]; var data = google.visualization.arrayToDataTable(chartPoints, true); data.setColumnProperty(5, 'role', 'annotation'); var options = { legend: 'none', bar: { groupWidth: '40%', width: '100%' }, candlestick: { fallingColor: { strokeWidth: 0, fill: '#a52714' }, risingColor: { strokeWidth: 0, fill: '#0f9d58' } } }; var container = document.getElementById('chart_div'); var chart = new google.visualization.CandlestickChart(container); google.visualization.events.addListener(chart, 'ready', function () { var annotation; var bars; var chartLayout; var formatNumber; var positionY; var positionX; var rowBalance; var rowBottom; var rowIndex; var rowTop; var rowValue; var rowWidth; chartLayout = chart.getChartLayoutInterface(); rowIndex = 0; formatNumber = new google.visualization.NumberFormat({ pattern: '#,##0' }); bars = container.getElementsByTagName('rect'); for (var i = 0; i < bars.length; i++) { switch (bars[i].getAttribute('fill')) { case '#a52714': case '#0f9d58': rowWidth = parseFloat(bars[i].getAttribute('width')); if (rowWidth > 2) { rowBottom = data.getValue(rowIndex, 1); rowTop = data.getValue(rowIndex, 3); rowValue = rowTop - rowBottom; rowBalance = Math.max(rowBottom, rowTop); positionY = chartLayout.getYLocation(rowBalance) - 6; positionX = parseFloat(bars[i].getAttribute('x')); // row value annotation = container.getElementsByTagName('svg')[0].appendChild(container.getElementsByTagName('text')[0].cloneNode(true)); annotation.textContent = formatNumber.formatValue(rowValue); annotation.setAttribute('x', (positionX + (rowWidth / 2))); annotation.setAttribute('y', positionY); annotation.setAttribute('font-weight', 'bold'); // annotation column annotation = container.getElementsByTagName('svg')[0].appendChild(container.getElementsByTagName('text')[0].cloneNode(true)); annotation.textContent = data.getValue(rowIndex, 5); annotation.setAttribute('x', (positionX + (rowWidth / 2))); annotation.setAttribute('y', positionY - 18); annotation.setAttribute('font-weight', 'bold'); rowIndex++; } break; } } }); chart.draw(data, options); } 

 <script src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart_div"></div>