将刻度标签偏移到水平条形图刻度之间的中心

Question

我正在使用 Google 图表创建水平条形图，并且我想在刻度之间放置水平轴刻度标签（将刻度标签向右偏移半个刻度）。也不能保证每个标签的字符数相同。有什么功能可以实现这一点吗？

这是我创建图表的函数

function drawChart() {
            var data = google.visualization.arrayToDataTable([
                ["Performance", "Level", { role: "style" }],
                ["PL", 1.01, "#5aa66d"]
            ]);

            var view = new google.visualization.DataView(data);
            view.setColumns([0, 1,
                {
                    calc: function (dt, rowIndex) { return 'PL=' + (dt.getValue(rowIndex, 1)).toString()} ,
                    sourceColumn: 1,
                    type: "string",
                    role: "annotation"
                },
                2]);

            var options = {
                width: 600,
                height: 100,
                bar: { groupWidth: "80%" },
                legend: { position: "none" },
                hAxis: {
                    minValue: 0,
                    maxValue: 3,
                    ticks: [
                        { v: 0, f: 'Col1' },
                        { v: 1, f: 'Col2' },
                        { v: 2, f: 'Col3' },
                        { v: 3, f: 'Col4' }
                    ]
                }
            };
            var chart = new google.visualization.BarChart(document.getElementById("barchart_values"));
            chart.draw(view, options);
        }

这是当前的图表 https://imgur.com/LvQEbtY 这就是我想要实现的目标： https://imgur.com/hwvIOG2

编辑： 对于想法，在 chart.draw 之前我添加了一个事件侦听器并找到所有文本标签并修改“x”属性以重新定位刻度标签。这可行，但它也会影响条形数据标签，这是一个问题。

google.visualization.events.addListener(chart, 'ready', function () {
       var elements = document.getElementById("barchart_values").getElementsByTagName("text");
       for (var i = 0; i < elements.length; i++) {
              elements[i].setAttribute('x', (Number(elements[i].getAttribute('x')) + (chart.getChartLayoutInterface().getBoundingBox('chartarea').width / 4 / 2))); //chart width / tick count / 2
                }
            });

Answer 1

首先，我们将无法偏移网格线并且使用ticks 选项。

让我们通过使主要透明和次要可见来偏移网格线。
我们还可以通过设置为负值来抵消基线。

        baseline: -0.5,
        minorGridlines: {
            color: '#cccccc',
            count: 1
        },
        gridlines: {
            color: 'transparent',
            count: 4
        },

然后，为了有自定义刻度标签，我们可以使用您的原始想法手动更改它们。
只需要一个独特的属性将它们与条形标签分开。
这里使用了text-anchor 属性。

        if (elements[i].getAttribute('text-anchor') === 'middle') {
            elements[i].textContent = 'Col' + parseInt(elements[i].textContent) + 1;
        }

请参阅以下工作 sn-p...

google.charts.load('current', {
  packages:['corechart']
}).then(function () {
    var data = google.visualization.arrayToDataTable([
        ["Performance", "Level", { role: "style" }],
        ["PL", 1.01, "#5aa66d"]
    ]);

    var view = new google.visualization.DataView(data);
    view.setColumns([0, 1, {
        calc: function (dt, rowIndex) { return 'PL=' + (dt.getValue(rowIndex, 1)).toString()} ,
        sourceColumn: 1,
        type: "string",
        role: "annotation"
    }, 2]);

    var options = {
        width: 600,
        height: 100,
        bar: { groupWidth: "80%" },
        legend: { position: "none" },
        hAxis: {
            baseline: -0.5,
            minorGridlines: {
                color: '#cccccc',
                count: 1
            },
            gridlines: {
                color: 'transparent',
                count: 4
            },
            minValue: 0,
            maxValue: 3,
        }
    };

    var chart = new google.visualization.BarChart(document.getElementById("barchart_values"));

    google.visualization.events.addListener(chart, 'ready', function () {
        var elements = document.getElementById("barchart_values").getElementsByTagName("text");
        for (var i = 0; i < elements.length; i++) {
            if (elements[i].getAttribute('text-anchor') === 'middle') {
                elements[i].textContent = 'Col' + (parseInt(elements[i].textContent) + 1);
            }
        }
    });

    chart.draw(view, options);
});

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

以上将确保所有标签保持可见，只需简单地移动它们，可能会导致它们被推离图表的可见部分。