Comment personnaliser l'histogramme Google Maps

Question

Je voudrais personnaliser l'histogramme d'une colonne pour l'aligner en lignes, comme sur une image.

Answer 1

ne voient pas toutes les options de configuration qui va changer le style
ni le rôle de la colonne de style disponibles sur ce tableau

mais vous pouvez essayer de changer le style manuellement

$.each($('rect[fill="#3366cc"]'), function (index, bar) { 
     $(bar).attr('stroke', '#ffffff'); 
     $(bar).attr('stroke-width', '3'); 
    }); 

un MutationObserver est utilisé pour empêcher le graphique de revenir à son style d'origine,
à tout moment il y a activ lité, comme le vol stationnaire

voir ci-dessous extrait de travail ...

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

 
function drawChart() { 
 
    var data = google.visualization.arrayToDataTable([ 
 
    ['Dinosaur', 'Length'], 
 
    ['Acrocanthosaurus (top-spined lizard)', 12.2], 
 
    ['Albertosaurus (Alberta lizard)', 9.1], 
 
    ['Allosaurus (other lizard)', 12.2], 
 
    ['Apatosaurus (deceptive lizard)', 22.9], 
 
    ['Archaeopteryx (ancient wing)', 0.9], 
 
    ['Argentinosaurus (Argentina lizard)', 36.6], 
 
    ['Baryonyx (heavy claws)', 9.1], 
 
    ['Brachiosaurus (arm lizard)', 30.5], 
 
    ['Ceratosaurus (horned lizard)', 6.1], 
 
    ['Coelophysis (hollow form)', 2.7], 
 
    ['Compsognathus (elegant jaw)', 0.9], 
 
    ['Deinonychus (terrible claw)', 2.7], 
 
    ['Diplodocus (double beam)', 27.1], 
 
    ['Dromicelomimus (emu mimic)', 3.4], 
 
    ['Gallimimus (fowl mimic)', 5.5], 
 
    ['Mamenchisaurus (Mamenchi lizard)', 21.0], 
 
    ['Megalosaurus (big lizard)', 7.9], 
 
    ['Microvenator (small hunter)', 1.2], 
 
    ['Ornithomimus (bird mimic)', 4.6], 
 
    ['Oviraptor (egg robber)', 1.5], 
 
    ['Plateosaurus (flat lizard)', 7.9], 
 
    ['Sauronithoides (narrow-clawed lizard)', 2.0], 
 
    ['Seismosaurus (tremor lizard)', 45.7], 
 
    ['Spinosaurus (spiny lizard)', 12.2], 
 
    ['Supersaurus (super lizard)', 30.5], 
 
    ['Tyrannosaurus (tyrant lizard)', 15.2], 
 
    ['Ultrasaurus (ultra lizard)', 30.5], 
 
    ['Velociraptor (swift robber)', 1.8]]); 
 

 
    var options = { 
 
    title: 'Lengths of dinosaurs, in meters', 
 
    legend: { position: 'none' }, 
 
    height: 400, 
 
    colors: ['#29b6f6'] 
 
    }; 
 

 
    var container = document.getElementById('chart_div'); 
 
    var chart = new google.visualization.Histogram(container); 
 
    var observer = new MutationObserver(function() { 
 
    $.each($('rect[fill="#29b6f6"]'), function (index, bar) { 
 
     // change stroke 
 
     $(bar).attr('stroke', '#ffffff'); 
 
     $(bar).attr('stroke-width', '4'); 
 
     // round corners 
 
     $(bar).attr('rx', '6'); 
 
     $(bar).attr('ry', '6'); 
 
    }); 
 
    }); 
 
    observer.observe(container, { 
 
    childList: true, 
 
    subtree: true 
 
    }); 
 
    chart.draw(data, options); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart_div"></div>