Googleグラフのヒストグラムをカスタマイズする方法

Question

写真のように、1つの列ヒストグラムを線で破線にカスタマイズしたいと考えています。

Answer 1

スタイル
を変更もこのチャート

で利用可能なスタイルの列の役割ですが、あなたのスタイルを手動

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

を変更しようとすることができます任意の設定オプションが表示されません

MutationObserverは、チャートが元のスタイルに戻るのを防ぐために使用されます。
いつでもアクティブがありますこのようホバー

のようityが、...作業スニペット以下

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>