Javascript 材料设计中谷歌柱状图列宽的调整

我一直在尝试调整柱形图中柱形条的宽度，两个多小时都没有成功

我尝试了bar:groupwidth属性和stroke width属性

然而，这两个属性并没有给我期望的结果

我想要更薄的柱形条。另外，如果您能帮助我设置不透明度，那就太好了。

jsfiddle如下所示

我的代码如下：

google.load（“可视化”、“1.1”、{packages:[“bar”]}）；
setOnLoadCallback（drawChart）；
函数绘图图（）{
var data=new google.visualization.arrayToDataTable(
[[“产品组”、“成本”{角色：“样式”}]，
[“手机服务”，622091，“颜色：#e5e4e2”]，
[“Is-b2c和网上购物”，516712，“颜色：#e5e4e2”]，
[“巧克力”，471978，“颜色：#e5e4e2”]，
[“保湿乳液/面霜”，440608，“颜色：#e5e4e2”]，
[“汽车/吉普车”，428122，“颜色：#e5e4e2”]，
[“牙膏”，409959，“颜色：#e5e4e2”]，
[“香皂”，406538，“颜色：#e5e4e2”]，
[“洗衣粉/液体”，393950，“颜色：#e5e4e2”]，
[“洗发水”，339508，“颜色：#e5e4e2”]，
[“手机-智能手机”，304563，“颜色：#e5e4e2”]；
var chart=new google.charts.Bar（document.getElementById（'chart_div'））；chart.draw（数据，{'is3D'：true，left:0，top:0，height:280，width:850，colors:['#80808080']，Bar:{groupWidth:'4%}，图例：{position none'}，hAxis:{showTextEvery:0，slidedtext false，}）；
}

根据：

材料图表在测试版中。外观和交互性都很好 基本上是最终的，但选项的声明方式并非如此

在您的情况下，请更换该行：

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（）

可以 某些功能的优势，如

条

选项

修改示例

google.load（“可视化”、“1.1”、{packages:[“bar”、“corechart”]}）；
setOnLoadCallback（drawChart）；
函数绘图图（）{
var data=new google.visualization.arrayToDataTable(
[[“产品组”、“成本”{角色：“样式”}]，
[“手机服务”，622091，“颜色：#e5e4e2”]，
[“Is-b2c和网上购物”，516712，“颜色：#e5e4e2”]，
[“巧克力”，471978，“颜色：#e5e4e2”]，
[“保湿乳液/面霜”，440608，“颜色：#e5e4e2”]，
[“汽车/吉普车”，428122，“颜色：#e5e4e2”]，
[“牙膏”，409959，“颜色：#e5e4e2”]，
[“香皂”，406538，“颜色：#e5e4e2”]，
[“洗衣粉/液体”，393950，“颜色：#e5e4e2”]，
[“洗发水”，339508，“颜色：#e5e4e2”]，
[“手机-智能手机”，304563，“颜色：#e5e4e2”]；
var chart=new google.charts.Bar（document.getElementById（'chart_div'）；
变量选项={
“is3D”：正确，
左：0，顶：0，高：280，宽：850，
颜色：['#808080']，
条：{groupWidth:'14%'}，
图例：{位置：'无'}，
hAxis:{showTextEvery:0，slidedtext:false}
};
绘制（数据，google.charts.Bar.convertOptions（选项））；
}