Рендеринг метки гексис Google Charts - PullRequest
Новая
       4

Рендеринг метки гексис Google Charts

0 голосов
/ 29 сентября 2018

Я использую Google Charts - Линейный график, чтобы показать недельный тренд (ось X) и Стоимость (ось Y).Теперь, если я простираюсь на количество недель за последние 9 месяцев, то большинство надписей оси X скрыты из-за нехватки места.Я пытаюсь отобразить метку оси только для первой недели месяца и оставил пустым значение для остальных.

Можно ли отобразить все 9 меток (первая неделя каждого месяца) для 9месяцев

1 Ответ

0 голосов
/ 01 октября 2018

для отображения меток определенных осей, используйте параметр конфигурации -> hAxis.ticks

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

если вы используете даты, то массив должен быть заполнен значениями даты.

hAxis: {
  ticks: [new Date(2018, 0, 1), new Date(2018, 1, 1), new Date(2018, 2, 1), ...]
}

вы также можете использовать нотацию объекта для заполнения массива,
используя нотацию объекта, вы можете указать значение (v:) и форматированное значение (f:).

hAxis: {
  ticks: [{v: new Date(2018, 0, 1), f: '01/01/2018'}, {v: new Date(2018, 1, 1), f: '02/01/2018'}, ...]
}

см. Следующий рабочий фрагмент, данные и тики строятся динамически ... 

google.charts.load('current', {
  callback: function () {
    drawChart();
    window.addEventListener('resize', drawChart, false);
  },
  packages:['corechart']
});

function drawChart() {
  var datePattern = 'MM/dd/yyyy';
  var formatDate = new google.visualization.DateFormat({
    pattern: datePattern
  });

  var dataTable = new google.visualization.DataTable();
  dataTable.addColumn('date', 'X');
  dataTable.addColumn('number', 'Value');

  var oneDay = (1000 * 60 * 60 * 24);
  var startDate = new Date(2018, 0, 1);
  var endDate = new Date(2018, 9, 0);
  var ticksAxisH = [];
  for (var i = startDate.getTime(); i <= endDate.getTime(); i = i + oneDay) {
    // set x value
    var rowDate = new Date(i);
    var xValue = {
      v: rowDate,
      f: formatDate.formatValue(rowDate)
    };

    // add tick at beginning of each month
    if (rowDate.getDate() === 1) {
      ticksAxisH.push(xValue);
    }

    // set y value (y = 2x + 8)
    var yValue = (2 * ((i - startDate.getTime()) / oneDay) + 8);

    // add data row
    dataTable.addRow([
      xValue,
      yValue
    ]);
  }

  var container = document.getElementById('chart_div');
  var chart = new google.visualization.LineChart(container);
  chart.draw(dataTable, {
    chartArea: {
      height: '100%',
      width: '100%',
      top: 32,
      left: 48,
      right: 18,
      bottom: 32
    },
    hAxis: {
      ticks: ticksAxisH
    },
    height: 288,
    legend: {
      position: 'top'
    },
    width: '100%'
  });
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
...