Question

我一直试图在柱形图中调整柱条宽度超过2小时而没有任何成功。

我试过了bar：groupwidth属性以及stroke-width属性。

然而，这两个属性都没有给我预期的结果。

我想要更薄的栏杆。另外，如果你可以帮助我设置不透明度，那就太好了。

jsfiddle如下所示。

我的代码如下：

google.load( "visualization", "1.1", {packages:["bar"]});
            google.setOnLoadCallback(drawChart);

 function drawChart() {
            var data = new google.visualization.arrayToDataTable(
         [["Product Groups","Cost",{ role: "style" }],
          ["Cellular Phone Service",622091,"color:#e5e4e2"],
          ["Is-b2c & Online Shopping",516712,"color:#e5e4e2"],
          ["Chocolates",471978,"color:#e5e4e2"],
          ["Moisturising Lotion/creams",440608,"color:#e5e4e2"],
          ["Auto-cars/jeeps",428122,"color:#e5e4e2"],
          ["Tooth Pastes",409959,"color:#e5e4e2"],
          ["Toilet Soaps",406538,"color:#e5e4e2"],
          ["Washing Powders/liquids",393950,"color:#e5e4e2"],
          ["Shampoos",339508,"color:#e5e4e2"],
          ["Cellular Phones-smart Phones",304563, "color:#e5e4e2"]  ]); 
                
  var chart = new google.charts.Bar(document.getElementById('chart_div')); chart.draw(data,{  'is3D':true, left:0,top:0,height:280,width:850,colors: ['#808080'], bar: { groupWidth: '4%' },legend: { position:'none'}, hAxis: {showTextEvery:0, slantedText:false,   } });
 }

  <script type="text/javascript" src="https://www.google.com/jsapi"></script>
  <div id="chart_div"></div>

Answer 1

根据documentation：

材料图表位于测试版中。外观和互动性很大程度上是最终的，但声明选项的方式不是。

在您的情况下替换以下行：

chart.draw(data,{  'is3D':true, left:0,top:0,height:280,width:850,colors: ['#808080'], bar: { groupWidth: '4%' },legend: { position:'none'}, hAxis: {showTextEvery:0, slantedText:false,   } });

用这个：

var options = {
        'is3D': true,
        left: 0, top: 0, height: 280, width: 850,
        colors: ['#808080'],
        bar: { groupWidth: '14%' },
        legend: { position: 'none' },
        hAxis: { showTextEvery: 0, slantedText: false }
    };

chart.draw(data, google.charts.Bar.convertOptions(options));

使用google.charts.Bar.convertOptions()可以拍摄某些功能的优点，例如bar选项。

修改后的示例

google.load("visualization", "1.1", { packages: ["bar","corechart"] });
google.setOnLoadCallback(drawChart);

function drawChart() {
    var data = new google.visualization.arrayToDataTable(
 [["Product Groups", "Cost", { role: "style" }],
  ["Cellular Phone Service", 622091, "color:#e5e4e2"],
  ["Is-b2c & Online Shopping", 516712, "color:#e5e4e2"],
  ["Chocolates", 471978, "color:#e5e4e2"],
  ["Moisturising Lotion/creams", 440608, "color:#e5e4e2"],
  ["Auto-cars/jeeps", 428122, "color:#e5e4e2"],
  ["Tooth Pastes", 409959, "color:#e5e4e2"],
  ["Toilet Soaps", 406538, "color:#e5e4e2"],
  ["Washing Powders/liquids", 393950, "color:#e5e4e2"],
  ["Shampoos", 339508, "color:#e5e4e2"],
  ["Cellular Phones-smart Phones", 304563, "color:#e5e4e2"]]);

  var chart = new google.charts.Bar(document.getElementById('chart_div'));
  

  var options = {
        'is3D': true,
        left: 0, top: 0, height: 280, width: 850,
        colors: ['#808080'],
        bar: { groupWidth: '14%' },
        legend: { position: 'none' },
        hAxis: { showTextEvery: 0, slantedText: false }
    };
  chart.draw(data, google.charts.Bar.convertOptions(options));
}

 <script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="chart_div"></div>

在材料设计中调整Google Columns图表的列宽

1 个答案: