javascript - 自定义 Google Material 条形图

Question

我必须制作一个如图所示的图表，它看起来几乎像来自谷歌的 Material 条形图，但它需要一点点修改。到目前为止，我还没有找到一种方法来修改悬停时的颜色、刻度数或行数以及图表区域的宽度。有人可以帮助我吗？

google.charts.load('current', {'packages':['corechart','bar']});
google.charts.setOnLoadCallback(barChart);
function barChart() {
  var data = new google.visualization.arrayToDataTable([
    ['Opening Move', 'Percentage', { role: 'style' }],
    ["King's pawn (e4)", 44, ' ' ],
    ["Queen's pawn (d4)", 31, ''],
    ["Knight to King 3 (Nf3)", 12,''],
    ["Queen's bishop pawn (c4)", 10,''],
    ['Other', 3, '']
  ]);

  var options = {
    width: 520,
    height: 320,
    legend: { 
      position: 'none' 
      },
    bars: 'horizontal', 
    axes: {
      x: {
        0: { 
          side: 'top',
          label: 'Percentage',
        } 
      }
    },
    hAxis: { ticks: [10,20,30] },
    bar: { groupWidth: "90%" },
//    chartArea: {
//      width: '78%',
//      left: '22%'
//    },
    colors:['#c6dbfd','#c6dbfd','#c6dbfd','#c6dbfd','#c6dbfd','#c6dbfd']
  };

    var chart = new google.charts.Bar(document.getElementById('bar-chart'));
    chart.draw(data, options);
  }

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="bar-chart"></div>

Answer 1

您正在使用 Material Bar Charts，它目前具有非常有限的一组功能(如 here 和 here 所示)。

这解释了为什么刻度和图表区域不起作用。我创建了一个可用的非 Material 版本的 fiddle :https://jsfiddle.net/5Lnbbbbw/1/ .

它很相似，但是使用:

var chart = new google.visualization.BarChart(document.getElementById('bar-chart'));

代替

var chart = new google.charts.Bar(document.getElementById('bar-chart'));

现在悬停:这很困难，因为没有管理它的选项。事实上，您在悬停和点击时看到的是添加到图表中的新元素；它不是通过 css 管理的。

但是，您可以这样做:

#bar-chart svg g[clip-path] g:not(:first-child) rect:hover {
    fill: blue;
    stroke: black;
    stroke-width: 1;
}

图表区域是具有 clip-path 属性的 svg 元素 g。第一个子项将所有刻度条(垂直线)分组，因此我们不想为它们添加 css 属性。

请注意，如果您删除刻度条，您可能需要稍微更新 css。

如果您想了解更多关于酒吧的 css 选项，您可以找到更多信息 here .