如何自定义Google图表直方图

Question

我想将一个列直方图自定义为虚线，就像在图片上一样。

Answer 1

没有看到任何会改变风格的配置选项 此图表上也没有样式列角色

但您可以尝试手动更改样式

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

MutationObserver用于防止图表恢复原始样式，
任何时候都有活动，例如悬停

请参阅以下工作代码段...

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>