Usuń dopełnienie lub marginesy z Google Charts


151

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

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

// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {

  // Create the data table.
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Topping');
  data.addColumn('number', 'Slices');

  var myData = {
    'Mushrooms': 3,
    'Onions': 1,
    'Olives': 1,
    'Zucchini': 1,
    'Pepperoni': 2
  };

  var rows = [];
  for (element in myData) {
      rows.push([element + " (" + myData[element] + ")", myData[element]])
  }
  data.addRows(rows);

  // Set chart options
  var options = {'title':'How Much Pizza I Ate Last Night',
                 'width':450,
                 'height':300};

  // Instantiate and draw our chart, passing in some options.
  var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}
<script type="text/javascript" src="https://www.google.com/jsapi"></script>

<div id="chart_div"></div>

Przykładowe skrzypce

Jak usunąć dopełnienie lub marginesy w tym przykładzie?


jeśli ktoś chce dobrze uzasadnić, ponieważ masz pomiary po lewej stronie wykresu liniowego, chartArea: {width: '70%', left: '30%'}załatwił sprawę za mnie. Źródło: code.google.com/p/google-visualization-api-issues/issues/…
IsmailS

Odpowiedzi:


246

Dodając i dostrajając niektóre opcje konfiguracyjne wymienione w dokumentacji API , można tworzyć wiele różnych stylów. Na przykład, tutaj jest wersja , że usuwa większość dodatkowego pustego miejsca przez ustawienie chartArea.widthna 100% i chartArea.heightdo 80% i przesunięcie legend.positiondo dołu :

// Set chart options
var options = {'title': 'How Much Pizza I Ate Last Night',
               'width': 350,
               'height': 400,
               'chartArea': {'width': '100%', 'height': '80%'},
               'legend': {'position': 'bottom'}
    };

Jeśli chcesz go bardziej dostroić, spróbuj zmienić te wartości lub użyć innych właściwości z linku powyżej.


78

Jestem dość spóźniony, ale każdy użytkownik szukający tego może uzyskać pomoc. Wewnątrz opcji możesz przekazać nowy parametr o nazwie chartArea .

        var options = {
        chartArea:{left:10,top:20,width:"100%",height:"100%"}
    };

Opcje Left i Top będą definiować ilość wypełnienia od lewej i od góry. Mam nadzieję, że to pomoże.


chartArea.top załatwił sprawę w przypadku mojego dynamicznego elementu div. Dzięki.
Blamkin86

60

Przybyłem tutaj jak większość ludzi z tym samym problemem i wyszedłem zszokowany, że żadna z odpowiedzi nie zadziałała nawet zdalnie.

Dla wszystkich zainteresowanych, oto rzeczywiste rozwiązanie:

... //rest of options
width: '100%',
height: '350',
chartArea:{
    left:5,
    top: 20,
    width: '100%',
    height: '350',
}
... //rest of options

Klucz tutaj nie ma nic wspólnego z wartościami „left” lub „top”. Ale raczej:

Wymiary zarówno wykresu, jak i obszaru wykresu są USTAWIONE i ustawione na SAMEJ WARTOŚĆ

Jako poprawka do mojej odpowiedzi. Powyższe rzeczywiście rozwiązuje problem „nadmiernego” dopełnienia / marginesu / białych znaków. Jeśli jednak chcesz dołączyć etykiety osi i / lub legendę , będziesz musiał zmniejszyć wysokość i szerokość obszaru wykresu, tak aby znajdował się nieco poniżej zewnętrznej szerokości / wysokości. To „powie” interfejsowi API wykresu, że jest wystarczająco dużo miejsca na wyświetlenie tych właściwości. W przeciwnym razie z radością je wykluczy.


2
Jako poprawka do mojej odpowiedzi. To rzeczywiście rozwiąże problem „nadmiernego” dopełnienia / marginesu / białych znaków. Jeśli jednak chcesz dołączyć etykiety osi i / lub legendę, będziesz musiał zmniejszyć wysokość i szerokość obszaru wykresu, tak aby znajdował się nieco poniżej zewnętrznej szerokości / wysokości. To „powie” interfejsowi API wykresu, że jest wystarczająco dużo miejsca na wyświetlenie tych właściwości. W przeciwnym razie z radością je wykluczy.
pimbrouwers

1
Myślę, że powodem, dla którego inne rozwiązania nie zadziałały, jest prawdopodobnie to, że założyli, że wykres został wstawiony do DIV, który miał już ustawione atrybuty szerokości i wysokości, ale tego nie zrobiłeś. Dobrym pomysłem jest wstępne ustawienie wysokości i szerokości w kodzie HTML, tak aby układ strony nie zmieniał się po zapełnieniu wykresu. Zapobiegnie to „przeskakiwaniu” elementów na stronie podczas ładowania.
Dave Burton,

@Dave dzięki za sugestię, ale niekoniecznie się zgadzam. Jest wiele sytuacji, w których po prostu nie wiesz, jakie będą te wartości. I wygląda na to, że co najmniej 15 innych osób uważa, że ​​moja oferta jest odpowiednia.
pimbrouwers

1
Zgadzam się, Pim. Jeśli nie znasz wcześniej szerokości i / lub wysokości (być może dlatego, że chcesz, aby strona dostosowywała się responsywnie), nie możesz ustawić szerokości i wysokości w DIV. Właśnie wskazywałem, dlaczego myślę, że rozwiązania podane w innych odpowiedziach zadziałały dla nich, ale nie zadziałały dla Ciebie, i dlaczego dobrze jest wstępnie ustawić szerokość i wysokość w DIV, jeśli możesz.
Dave Burton

1
Z powodów, które wskazuje @DaveBurton, jest to prawdopodobnie poprawna odpowiedź, jeśli pracuję z siatką CSS (którą jestem)
Stephen R

14

Brakuje go w dokumentach (używam wersji 43), ale w rzeczywistości możesz użyć prawej i dolnej właściwości obszaru wykresu:

var options = {
  chartArea:{
    left:10,
    right:10, // !!! works !!!
    bottom:20,  // !!! works !!!
    top:20,
    width:"100%",
    height:"100%"
  }
};

Możliwe jest więc użycie pełnej responsywnej szerokości i wysokości oraz zapobieganie przycinaniu etykiet osi lub legend.


Możliwość użycia właściwego jest zdecydowanie fajnym dodatkiem, jednak w przypadku wykresu kolumnowego, który wymaga liczb na osi pionowej, będzie to trudne, gdy wartości będą się wahać o dobry bit - na przykład wykres z wartościami z zakresu od 0 - 100 wymagałoby lewej wartości 20 pikseli, ale 0 - 10 mil wymagałoby 100 pikseli, a użycie 100 pikseli pozostawiłoby dość duży margines, którego, jak sądzę, wszyscy próbujemy się pozbyć :) Chyba że tak jest opcja, która pozwala wykresowi dostosować własną szerokość, której mi brakuje. Jakieś przemyślenia, jak można by to rozwiązać?
user3800174

Wygląda na to, że udokumentowali to 2 października 2015, tutaj: archive.is/lwbQY#selection-2997.0-3011.1
Dave Burton

13

Istnieje taka możliwość, jak wspomniał Aman Virk :

var options = {
    chartArea:{left:10,top:20,width:"100%",height:"100%"}
};

Pamiętaj jednak, że wyściółka i margines nie przeszkadzają. Jeśli masz możliwość przełączania się między różnymi typami wykresów, takimi jak ColumnChart i ten z pionowymi kolumnami, potrzebujesz marginesu do wyświetlania etykiet tych linii.

Jeśli usuniesz ten margines, w końcu zobaczysz tylko część etykiet lub nie zobaczysz ich wcale.

Więc jeśli masz tylko jeden typ wykresu, możesz zmienić margines i wypełnienie, jak powiedział Arman. Ale jeśli jest to możliwe, nie zmieniaj ich.


11

Dostępny jest motyw specjalnie do tego celu

options: {
  theme: 'maximized'
}

z dokumentów wykresu Google:

Obecnie dostępny jest tylko jeden motyw:

„zmaksymalizowany” - maksymalizuje obszar wykresu i rysuje legendę oraz wszystkie etykiety wewnątrz obszaru wykresu. Ustawia następujące opcje:

chartArea: {width: '100%', height: '100%'},
legend: {position: 'in'},
titlePosition: 'in', axisTitlesPosition: 'in',
hAxis: {textPosition: 'in'}, vAxis: {textPosition: 'in'}

To wydaje się najlepsza opcja. Po ustawieniu tematu: „zmaksymalizowany” nadal można dostroić wygląd, np. Wysokość: „90%”, pozycja tekstu: „na zewnątrz” itp.
Jiri Kriz
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.