Google条形图居中注释

Question

我正在尝试从此处调整注释中心解决方案： google charts move annotation position to center of stacked chart 在我自己的图表上。

我已经根据以下提示建立了漏斗图：Centered bars on a Google Chart BarChart?

我将它们组合成一个新的解决方案，但无法将其与注释集中在一起使用。我尝试过，但是大多数时候它并没有完全居中。或者它不可读，并且第二条上的注释在图表“下方”运行。

现在是这样的： https://i.imgur.com/JIo4p4r.png 第一个小节上的标签并不是真正居中（太左），而第二个小节上的标签则缺少开头。它应该说“ 60 ssss sss”。

<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
        var chart;
        var container;
        var barInfoLabels = [['','','',''],
            ['sssss  sss sssss  sss  sssss  sss 80', '60 sssss  sss', '40 sssss  sssssssss  ssssssss  ssssssssssssss', '20 sssss  sssssssss  ssssssss  ssssssssssssss']];

        function initialize()
        {
            container = document.getElementById('chart_div');
            chart = new google.visualization.BarChart(container);
            // Create and populate the data table.
            var data = new google.visualization.DataTable();

            // First key of the inner array is the label ("Benutzer" and "Nothing"), following keys are the values.
            // Every loop with raw_data needs to start at key "1", after the label.
            var raw_data = [['Invisible', 116.5, 7116.5, 7180, 7248],
                ['Visible', 15767, 1767, 1640, 1504]];

            var funnelLevelNames = ["Step1", "Step2", "Step3", "Step4"];

            // Inner arrays here start directly with the color, so can be started with "0" in a loop.
            var colorData = [['white','white','white','white'],
                ['red','blue','yellow','black']];

            data.addColumn('string', 'Funnel Level');
            for (var i = 0; i  < raw_data.length; ++i) {
                data.addColumn('number', raw_data[i][0]);
            }

            // Color column
            data.addColumn({ type: 'string', role: 'style' });

            // Labels on the funnel bars column
            data.addColumn({ type: 'string', role: 'annotation', p: {html: true}});

            // Tooltip Labels
            data.addColumn({type: 'string', role: 'tooltip'});

            data.addRows(funnelLevelNames.length);
            for (var j = 0; j < funnelLevelNames.length; ++j) {
                data.setValue(j, 0, funnelLevelNames[j].toString());
            }

            var totalIndex = 0;
            for (var i = 0; i  < raw_data.length; ++i) {
                for (var j = 1; j  < raw_data[i].length; ++j) {
                    data.setValue(j-1, i+1, raw_data[i][j]);
                }
            }
            totalIndex = i;

            // Color Values
            for (var i = 0; i  < colorData.length; ++i) {
                for (var j = 0; j  < colorData[i].length; ++j) {
                    data.setValue(j, totalIndex+1, colorData[i][j]);
                }
            }

            // Annotation/Label Values
            for (var i = 0; i  < barInfoLabels.length; ++i) {
                for (var j = 0; j  < barInfoLabels[i].length; ++j) {
                    data.setValue(j, totalIndex+2, barInfoLabels[i][j].toString());
                }
            }

            // Tooltip Values
            var tooltipIndex = totalIndex+3;
            for (var i = 0; i  < barInfoLabels.length; ++i) {
                for (var j = 0; j  < barInfoLabels[i].length; ++j) {
                    data.setValue(j, tooltipIndex, barInfoLabels[i][j].toString());
                }
            }

            google.visualization.events.addListener(chart, 'ready', function () {
                var observer = new MutationObserver(moveAnnotations);
                observer.observe(container, {
                    childList: true,
                    subtree: true
                });
            });

            // Create and draw the visualization.
            chart.draw(data,
                {
                    title:"",
                    width: "100%", height: 600,
                    chartArea: {width: '80%', height: '60%', top: '1%', left: '20%'},
                    colors: ['ffffff','blue'],
                    vAxis: {title: ""},
                    hAxis: {title: "", gridlineColor : 'ffffff', textPosition: 'none'},
                    isStacked: true,
                    legend: {position: 'none'},
                    series: {
                        0: { enableInteractivity: false, tooltip: 'none'}, // Disable tooltip for hidden bars (invisible funnel helper bars for centering)
                        1: { } // Show tooltip for funnel bars
                    }
                }
            )
        }

        function moveAnnotations() {
            var chartLayout = chart.getChartLayoutInterface();
            var barBounds;
            var labelBounds;
            var xAdj;

            var labels = container.getElementsByTagName('text');
            var index = 0;

            Array.prototype.forEach.call(labels, function(label) {
                if (label.getAttribute('text-anchor') === 'end' && (barInfoLabels[1].includes(parseInt(label.textContent)) || barInfoLabels[1].includes(label.textContent))) {
                    console.log(label);
                    barBounds = chartLayout.getBoundingBox('bar#1#' + index);
                    if (barBounds != null) {
                        labelBounds = chartLayout.getBoundingBox('annotationtext#1#' + index);
                        xAdj = (barBounds.width / 2) + (parseFloat(label.getAttribute('font-size')) / 2) - 2;
                        label.setAttribute('x', barBounds.left + xAdj);
                    }
                    index++;
                }
            });
        }
</script>