Ярлыки h-оси диаграммы Google исчезают при рисовании диаграммы - PullRequest
Новая
       60

Ярлыки h-оси диаграммы Google исчезают при рисовании диаграммы

1 голос
/ 19 марта 2020

У меня есть линейный график с 3 линиями, где я отображаю ежедневные данные. Когда я получу больше данных, скажу, что у меня есть данные с октября 2019 года (за все дни) до сегодняшнего дня, метки оси h удаляются / исчезают. Первоначально я вижу метки оси h, и когда диаграмма продолжает рисовать, метки исчезают.

Ниже приведен код моей диаграммы: 

google.charts.load('current', {
  packages: ['corechart']
});
google.setOnLoadCallback(prepareChartData);

function prepareChartData(){
  var chartData = new google.visualization.DataTable();
  chartData.addColumn('date', 'Date');
  chartData.addColumn('number', 'Total');
  chartData.addColumn('number', 'Dogs');
  chartData.addColumn('number', 'Cats');
  title = 'My Chart';

  var options = {
title: title,
curveType: 'function',
legend: {position: 'bottom', alignment: 'start'},
colors: ['#003f5c', '#ffa600', '#665191', '#f95d6a'],

annotations: {
  alwaysOutside: true,
  textStyle: {
    color: 'black',
    fontSize: 11
  },
},
hAxis: {
  format: 'MMM yy',
  viewWindowMode: "explicit",
},
vAxis: {
  minValue: 0,
  viewWindowMode: "explicit",
  viewWindow: { min: 0 },
  title: ''
},
titleTextStyle: {
  color:'#3a3a3a',
  fontSize:24,
  bold:false
  // fontName: "Segoe UI"
  },
bar: {groupWidth: '95%'},
bars: 'horizontal'
  };

  var chartDivId = "chart_div";
  var chart = new google.visualization.LineChart(document.getElementById(chartDivId));
  var rawData =[];

   var chart_object = { "Dec 19": {monthLabel: "Dec", chartArray:[{'date': "2019-12-31", 'total': "5", 'cats': "10", 'dogs': "10"}]},"Jan 20": {monthLabel: "Jan", chartArray:[{'date': "2020-1-01", 'total': "5", 'cats': "10", 'dogs': "10"}]},"Feb 20": {monthLabel: "Feb", chartArray:[{'date': "2020-2-29", 'total': "5", 'cats': "10", 'dogs': "10"}]}, "Mar 20": {monthLabel: "Mar", chartArray:[{'date': "2020-3-01", 'total': "5", 'cats': "10", 'dogs': "10"},{'date': "2020-03-12", 'total': "15", 'cats': "30", 'dogs': "30"}]}};

  $.each(chart_object, function(i, chartobject) {
 	$.each(  chartobject.chartArray, function( chartIndex , chartValue ){

date = chartValue['date'];
total = parseInt(chartValue['total']);
catscount = parseInt(chartValue['cats']);
dogscount = parseInt(chartValue['dogs']);
catspercentage = 0;
catspercentageAnnotation = catscount+",  percent "+catspercentage+"%";
dogsspercentage = 0;
dogsspercentageAnnotation = dogscount+",  percent "+dogsspercentage+"%";

rawData.push([ new Date(date), total, {v: catscount, f: catspercentageAnnotation}, {v: dogscount, f: dogsspercentageAnnotation}]);
  });
  });

  var counter = 0;
  drawChart();

  function drawChart() {
if(counter < rawData.length){
  chartData.addRow(rawData[counter]);

  // build x-axis ticks to prevent repeated labels
  var dateFormat = new google.visualization.DateFormat({
    pattern: 'yyyy-MM-dd'
  });
  var dateRange = chartData.getColumnRange(0);
  var ticks = [];
  var dateTick = dateRange.min;
  while (dateTick.getTime() <= dateRange.max.getTime()) {
    if (ticks.length === 0) {
      // format first tick
      ticks.push({
        v: dateTick,
        f: dateFormat.formatValue(dateTick)
      });
    } else {
      ticks.push(dateTick);
    }
    dateTick = new Date(dateTick.getFullYear(), dateTick.getMonth() + 1, 1);
  }
  options.hAxis.ticks = ticks;

  chart.draw(chartData, options);
  counter++;
  window.setTimeout(drawChart, 1000);
}
  }
}
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" type="text/javascript" ></script>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <div id="chart_div"></div>

Я добавляю изображения диаграмм. На изображениях видно, что метки оси h исчезают.

enter image description here enter image description here enter image description here

Я думаю, что ярлыки исчезают, так как нет места. Как я могу добавить минимальную ширину для меток haxis?

Может кто-нибудь помочь мне найти проблему? Заранее спасибо.

1 Ответ

1 голос
/ 19 марта 2020

попробуйте использовать следующую опцию, чтобы увеличить пространство внизу графика. 

chartArea: {
  bottom: 80
},

это должно позволить печатать этикетки в две строки ...

...