Google Charts X Axis показывает вниз значения - PullRequest
Новая
       15

Google Charts X Axis показывает вниз значения

0 голосов
/ 20 ноября 2018

Я построил график Google Line, который показывает значения по оси X в чередующемся повышающемся формате, когда есть дополнительные значения, как показано ниже.

enter image description here

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

enter image description here

Мой код для построения диаграммы следующий: 

var options = {
        width: '100%',
        height: '100%',
        legend: ({ position: 'top', maxLines: 1, alignment: 'end'}),
        chartArea: { left: "8%", right: "8%", top: "10%", width: "100%", height: "75%" },
        backgroundColor: 'transparent',            
        tooltip: { textStyle: { color: 'black' }, isHtml: true },
        curveType: 'none',
    };

var chart = new google.visualization.LineChart($('Div')[0]);
chart.draw(view, options);

Есть ли какая-то особая опция, которую я должен применить, чтобы ось отображалась в требуемом формате?

1 Ответ

0 голосов
/ 20 ноября 2018

см. параметры конфигурации для hAxis

для представление наклона , используйте -> slantedText: true

hAxis.slantedText - Если true, нарисуйте текст горизонтальной оси под углом, чтобы помочь разместить больше текста вдоль оси.

для применения одного уровня меток используйте -> maxAlternation: 1

hAxis.maxAlternation - Максимальное количество уровней текста по горизонтальной оси.Если текстовые метки на оси становятся слишком переполненными, сервер может сместить соседние метки вверх или вниз, чтобы метки были ближе друг к другу.

, чтобы надписи не помещались в две строки, используйте -> maxTextLines: 1

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

примечание: вам может потребоваться отрегулировать chartArea.bottom, чтобы оставить больше места вдоль оси x ...

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

google.charts.load('current', {
  packages:['corechart']
}).then(function () {
  var dateFormat = 'dd MMM';
  var formatDate = new google.visualization.DateFormat({
    pattern: dateFormat
  });

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

  var oneDay = (1000 * 60 * 60 * 24);
  var startDate = new Date(2018, 9, 1);
  var endDate = new Date(2018, 9, 31);
  var ticksAxisH = [];
  for (var i = startDate.getTime(); i <= endDate.getTime(); i = i + oneDay) {
    var rowDate = new Date(i);
    var xValue = formatDate.formatValue(rowDate);
    var yValue = (2 * ((i - startDate.getTime()) / oneDay) + 8);
    dataTable.addRow([
      xValue,
      yValue
    ]);
  }

  var container = document.getElementById('chart_div');
  var chart = new google.visualization.LineChart(container);

  var options = {
    width: '100%',
    height: '100%',
    legend: {
      position: 'top',
      maxLines: 1,
      alignment: 'end'
    },
    chartArea: {
      bottom: 40,
      left: '8%',
      right: '8%',
      top: '10%',
      width: '100%',
      height: '75%'
    },
    backgroundColor: 'transparent',
    tooltip: {
      textStyle: {
        color: 'black'
      },
      isHtml: true
    },
    curveType: 'none',
    hAxis: {
      slantedText: true
    }
  };

  function drawChart() {
    chart.draw(dataTable, options);
  }

  drawChart();
  window.addEventListener('resize', drawChart, false);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
...