Как вы можете заставить рендеринг Google Charts vAxes? - PullRequest
Новая
       16

Как вы можете заставить рендеринг Google Charts vAxes?

0 голосов
/ 11 декабря 2018

В настоящее время у меня есть два графика, которые я отрисовываю на странице, я использую библиотеку визуализации Google Charts lib, и из-за проблем с размером страницы vAxes отказывается отрисовывать часть / большую часть времени.

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

Я посмотрел на него, и кажется, что он рендерит кучу тегов, когда он работает, и не рендерится, когда он не работает, что заставляет меня думать, что должен быть какой-то бычий ИЛИ "еще" ИИ"что активно выбирает саботировать меня!FS!

Кто-нибудь имел опыт работы с диаграммами и сумел найти обходной путь к тому, чтобы заставить библиотеку рендерить vAxes независимо от воли Google AI?(Серьезно, что случилось со вторым законом робототехники ?! Повинуйтесь мне, СКАМ!)

Извините, я немного раздражен, атм.

Редактировать: Извините, чтобы сообщить подробности, вотблок js, отображающий диаграммы: 

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">

// Load the Visualization API and the chart package.
google.charts.load('visualization', {'packages':['corechart']});

// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);

function drawChart() {


 var options = {
      hAxis: {showTextEvery: 5},
      vAxes: {  
                0: {textPosition: 'out',
                    viewWindowMode:'pretty',
                    viewWindow: {min:0},                        
                    gridlines: {color: 'transparent'},
                  },
              1: {  textPosition: 'out',
                    viewWindow: {min:0},
                    gridlines: {color: 'transparent'}
                  },

              },
              seriesType: 'bars',
                 series: {0: {targetAxisIndex:0, type: 'line'},
               1:{targetAxisIndex:1},
               2:{targetAxisIndex:1},
           }
    };

//Chart render
  var data1 = new google.visualization.DataTable(<?=$jsonEventType?>);

  var chart1 = new google.visualization.ComboChart(document.getElementById('chart_div1'));
    chart1.draw(data1, options);



}

элемент div:

(он находится в нескольких других div, но это помимо точки)

Как вы можете сказать, это базовая ccc-комбо-диаграмма, $ jsonEventType не имеет значения, я думаю, но вот она:

string (661) "{" cols ": [{"label ":" Date "," type ":" string "}, {" label ":" To Audit "," type ":" number "}, {" label ":" Open "," type ":" number"}, {" метка ":" Закрыто " "тип": "номер"}], "строки": [{ "с": [{ "v": "05/07/2018"}, {" v": 437}, {" v ": 0}, {" v ": 8}]}, {" с ": [{" v ":" 12/07/2018 "}, {" v ": 419}, { "v": 0}, { "v": 21}]}, { "с": [{ "v": "19/07/2018"}, { "v": 401}, { "v": 56}, {" v ": 36}]}, {" с ": [{" v ":" 26/07/2018 "}, {" v ": 385}, {" v ": 0}, { "v": 20}]}, { "с": [{ "v": "02/08/2018"}, { "v": 369}, { "v": 0}, { "v": 12}]}, {" с ": [{" v ":" 09/08/2018 "}, {" v ": 357}, {" v ": 0}, {" v ": 25}]}, { "с": [{ "v": "16/08/2018"}, { "v": 348}, {"V": 0}, { "v": 18}]}, { "с": [{ "v": "23/08/2018"}, { "v": 336}, { "v":0}, { "v": 14}]}, { "с": [{ "v": "30/08/2018"}, { "v": 316}, { "v": 0}, {"v": 13}]}]} "

1 Ответ

0 голосов
/ 11 декабря 2018

Вы можете использовать код конфигурации chartArea, чтобы обеспечить достаточно места с обеих сторон графика.

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

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

chartArea: {
  top: 32,         // leave room on top for legend
  left: 60,        // for axis index 0
  right: 60,       // for axis index 1
  bottom: 32,      // for x-axis
  height: '100%',  // stretch height
  width: '100%',   // stretch width
},
height: '100%',    // ensure fills height of container
width: '100%',     // fills width of container

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

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = new google.visualization.DataTable({"cols":[{"label":"Date","type":"string"},{"label":"To Audit","type":"number"},{"label":"Open","type":"number"},{"label":"Closed","type":"number"}],"rows":[{"c":[{"v":"05/07/2018"},{"v":437},{"v":0},{"v":8}]},{"c":[{"v":"12/07/2018"},{"v":419},{"v":0},{"v":21}]},{"c":[{"v":"19/07/2018"},{"v":401},{"v":56},{"v":36}]},{"c":[{"v":"26/07/2018"},{"v":385},{"v":0},{"v":20}]},{"c":[{"v":"02/08/2018"},{"v":369},{"v":0},{"v":12}]},{"c":[{"v":"09/08/2018"},{"v":357},{"v":0},{"v":25}]},{"c":[{"v":"16/08/2018"},{"v":348},{"v":0},{"v":18}]},{"c":[{"v":"23/08/2018"},{"v":336},{"v":0},{"v":14}]},{"c":[{"v":"30/08/2018"},{"v":316},{"v":0},{"v":13}]}]});

  var options = {
    chartArea: {
      top: 32,         // leave room on top for legend
      left: 60,        // for axis index 0
      right: 60,       // for axis index 1
      bottom: 32,      // for x-axis
      height: '100%',  // stretch height
      width: '100%',   // stretch width
    },
    height: '100%',    // ensure fills height of container
    width: '100%',     // fills width of container

    hAxis: {showTextEvery: 5},
    vAxes: {
      0: {
        textPosition: 'out',
        viewWindowMode:'pretty',
        viewWindow: {min: 0},
        gridlines: {color: 'transparent'},
      },
      1: {
        textPosition: 'out',
        viewWindow: {min: 0},
        gridlines: {color: 'transparent'}
      },
    },
    seriesType: 'bars',
    series: {
      0: {targetAxisIndex:0, type: 'line'},
      1: {targetAxisIndex:1},
      2: {targetAxisIndex:1},
    }
  };

  var chart = new google.visualization.ComboChart(document.getElementById('chart_div1'));
  chart.draw(data, options);
  window.addEventListener('resize', function () {
    chart.draw(data, options);
  });
});
html, body {
  height: 100%;
  margin: 0px 0px 0px 0px;
  overflow: hidden;
  padding: 0px 0px 0px 0px;
}

#chart_div1 {
  height: 100%;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div1"></div>
...