почему у меня появляются полосы прокрутки при использовании линейной диаграммы Google?

Я использую API линейной диаграммы Google, и независимо от того, насколько я большой размер диаграммы div, он всегда показывает горизонтальную и вертикальную полосу прокрутки. как я могу предотвратить это.

введите описание изображения здесь


google-api linechart
person leora    schedule 12.04.2012    source источник
comment
Не могли бы вы опубликовать HTML, JavaScript и CSS, которые используются для рендеринга диаграммы? Или упрощенный пример с таким же поведением? Это происходит в разных браузерах?   -  person Christian    schedule 16.04.2012
comment
вы должны были опубликовать свой код таким образом; поможет в значительной степени по вашему вопросу :) Также, как упомянул Кристиан: это происходит во всех браузерах или около того?   -  person Andrius Naruševičius    schedule 21.04.2012
comment
@leora: вы уверены, что полосы прокрутки не применяются родительским элементом, который на самом деле содержит диаграмму?   -  person Luca Filosofi    schedule 23.04.2012

Ответы (2)


arrow_upward
3
arrow_downward

КОНТЕКСТ: редактируемый HTML-код https://code.google.com/apis/ajax/playground/?type=visualization#line_chart (с использованием Firefox или Chorme).

Инструкции, которые помогут вам в решении проблемы:

  • Предположим, вам нужен блок шириной 500 пикселей и высотой 400 пикселей.
  • проверьте Javascript в новом google.visualization.LineChart (), если инициализация ширины и высоты равна 500 и 400.
  • проверьте, является ли стиль HTML-тега (возможно, div) места рендеринга (id = "visualization") style = "width: 800px; height: 400px;".
  • проверьте, не превышает ли стиль родительского тега HTML (любого) места рендеринга 500 и 400 или 100%.

Другое решение - «вырезать HTML»: используйте overflow: hidden.

ПРИМЕР СЛУЧАЯ С ПРОКРУТКОЙ

        // ... piece of your javacascript.
    new google.visualization.LineChart(document.getElementById('visualization')).
        draw(data, {curveType: "function",
                    width: 800, height: 400,
                    vAxis: {maxValue: 10}}
            );
    } google.setOnLoadCallback(drawVisualization);

<!-- ... piece of your HTML -->
<div id="container" style="width:400px;overflow:scroll;">
  <div id="visualization" style="width: 800px; height: 400px;"></div>
</div>

РЕШЕНИЕ HTML (исправьте ширину контейнера)

<!-- ... piece of your HTML -->
<div id="container" style="width:800px;overflow:scroll;">
  <div id="visualization" style="width: 800px; height: 400px;"></div>
</div>

ДРУГОЕ ПРОСТОЕ РЕШЕНИЕ HTML (используйте overflow: hidden)

<!-- ... piece of your HTML -->
<div id="container" style="width:400px;overflow:hidden;">
  <div id="visualization" style="width: 800px; height: 400px;"></div>
</div>

... или уменьшите все, Javascript и HTML ширину и высоту и т. д.

person Peter Krauss    schedule 16.04.2012
comment
Благодарю . . выглядело так, как будто у меня был лишний css, который менял переполнение - person leora; 23.04.2012

arrow_upward
1
arrow_downward

С использованием :

<script src="https://www.google.com/jsapi"></script>
<script>
  google.load("visualization", "1", {packages:["corechart"]});
var data = new google.visualization.DataTable();
//init your data
var options = {
      width: "100%", height: "100%",
      //other options

}
var chart = new google.visualization.LineChart(document.getElementById('chart'));
chart.draw(data, options);
</script>
....

<body>
   <div id="chart"></div>
</body>

Вы гарантируете, что график соответствует используемому вами div.

Затем, чтобы изменить размер графика, установите style="width: ...px; height: ...px;" на желаемый размер:

<body>
  <div style="width: 800px; height: 400px;" id="chart"></div>
</body>
person alain.janinm    schedule 21.04.2012