Блог

Главная - Вопросы по программированию - Управление выравниванием текста ярлыка Google Charts JS haxis

Управление выравниванием текста ярлыка Google Charts JS haxis

#javascript

Вопрос:

Я впервые играю с Google Charts и пытаюсь выяснить, как сделать диапазон дат отзывчивым как с точки зрения размера экрана, так и с точки зрения доступного пространства для меток в зависимости от количества точек данных.

Мне удалось создать несколько примеров кода с разрывами строк в метках haxis, но метка, похоже, выровнена по центру — есть ли способ выровнять это по левому краю? (или уже есть встроенный способ реагирования на даты?)

 var _count = 0;
var _months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    
doTest();

function doTest() {
    var dtT = '2010-01-01';
    var data = document.getElementById('data');
    data.innerHTML = '';

    var a = 0;
    var b = parseInt(document.getElementById('n').value);
    _count = b;

    var b0 = b;
    for (var d = 0; d < b0; d  ) {
        var dt = new Date(dtT);
        data.innerHTML  = "['"   getLabel(dt)   "', "   a   ","   b   "],";
        a  ;
        b--;

        dt.setDate(dt.getDate()   1) // tomorrow

        dtT = dt.getFullYear()   '/'   getNN(dt.getMonth()   1)   '/'   getNN(dt.getDate());
    }
    data.innerHTML = data.innerHTML.substr(0, data.innerHTML.length - 1);

    google.charts.load('current', {
        packages: ['corechart', 'bar']
    });
             google.charts.setOnLoadCallback(drawAxisTickColors);
}
// ------------------------------------------------------------------------
function getNN(n) {
   if (n < 10) return '0'   n;
   return n;
}
// ------------------------------------------------------------------------
function getLabel(tx) {
    var date = new Date(tx);
    var d = date.getDate();
    var m = date.getMonth()   1;
    var y = date.getYear() - 100;
    return d   ' \n'   _months[m - 1]   ' '   y;
}

// ------------------------------------------------------------------------
function drawAxisTickColors() {

    var ww = window.innerWidth;
    var numOfdates = 35;
    var tdString = document.getElementById('data').innerHTML;

    var arr = eval("["   tdString   "]");

    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Dt');
    data.addColumn('number', 'Open');
    data.addColumn('number', 'Closed');
    data.addRows(arr);

    var options_stacked = {
            isStacked: true,
            height: 300,
            hAxis: {
                slantedText: false,
                showTextEvery: 7
            },
            legend: {
                position: 'top',
                maxLines: 3
            },
            vAxis: {
                minValue: 0
            }
        };

    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
    chart.draw(data, options_stacked);
}

window.addEventListener('resize', drawAxisTickColors); 
 <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<h1>Google Charts Test</h1>
Columns:<input id='n' type='number' value='66'>
<input type='button' onClick='doTest()' value='Go'>
<div id="chart_div"></div>

<table style='display:none'>
  <tr><td id="data"></td></tr>        
</table>

Для этого тоже есть JSFiddle, если вы хотите поиграть с ним — https://jsfiddle.net/Abeeee/d5fojtp2 /

Ответ №1:

Хорошо, похоже, что создание первого столбца в данных в виде строки было проблемой; изменение его на сегодняшний день (и настройка кода для создания тестовых данных в соответствии с ним), похоже, позволяет диаграмме автоматически обрабатывать интервалы и перекрытия (и сводит на нет проблему выравнивания меток). Обратите внимание, что я также добавляю элемент управления format (format: ‘d / MMM / yy’) в массив hAxis.

   var data = new google.visualization.DataTable();
  data.addColumn('date', 'Dt');     <---- was string
  data.addColumn('number', 'Open');
  data.addColumn('number', 'Closed');
  data.addRows(arr);

См. https://jsfiddle.net/Abeeee/d5fojtp2/25 / для рабочего кода.

НО обратите внимание, что это по-прежнему приводит к сбою, когда у вас есть, скажем, 1 или 2 точки данных — ошибка в том, что даты под столбцами неверны.

Метки: