Смещенные метки тиков по центру между галочками на горизонтальной гистограмме - PullRequest
Новая
       16

Смещенные метки тиков по центру между галочками на горизонтальной гистограмме

1 голос
/ 05 апреля 2019

Я создаю горизонтальную гистограмму, используя диаграммы 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

EDIT: Для идей, прямо перед 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
                }
            });

1 Ответ

0 голосов
/ 05 апреля 2019

Во-первых, мы не сможем сместить линии сетки и , используя опцию 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>

вышеизложенное гарантирует, что все метки останутся видимыми, если их просто переместить, может привести к их отталкиванию от видимой части диаграммы.

...