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;
        }

请参阅以下工作片段...

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>

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

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

1 个答案: