使用GAS图表设置条形边框的颜色和权重 [英] Setting bar border color and weight using GAS charts
问题描述
我正在尝试在柱形图中设置条形边框的颜色和粗细.
I am trying to set the color and weight of the border of my bars in a column chart.
我尝试使用该选项
.setOption("stroke-width", 20)
但是他们什么也没改变
.addColumn(Charts.ColumnType.NUMBER, "blank")
.addColumn(Charts.ColumnType.NUMBER, "Embed")
.addColumn(Charts.ColumnType.NUMBER, "Initiate")
.addColumn(Charts.ColumnType.NUMBER, "Practice")
.addColumn(Charts.ColumnType.NUMBER, "Mature")
.addColumn(Charts.ColumnType.NUMBER, "Hub & Extend")
.addRow([1,parseInt(m[0]),parseInt(m[1]),parseInt(m[2]),parseInt(m[3]),parseInt(m[4])])
.build();
var xtextStyle = Charts.newTextStyle().setColor('white').setFontSize(1).build();
var chart = Charts.newColumnChart()
.setDimensions(1500, 1000)
//.useLogScale()
.setTitle(m[5] + "'s Dynamic Adventure Chart")
.setOption('colors', ["#6c564d", "#db5d52", "#3f4b5d", "#56be93", "#dce24b"])
.setDataTable(data)
.setLegendPosition(Charts.Position.BOTTOM)
.setRange(0,5)
.setOption("bar", {"groupWidth": '45%'})
.setOption("vAxis", { ticks: [0, 0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 4.5, 5]})
.setOption("hAxis", { gridlines: { count: 5 }, ticks: ["Embed", "Initiate", "Practice", "Mature", "Hub & Extend"] })
.setOption('chartArea', {'width': '90%', 'height': '80%'})
.build();```
I would like all of the bars (there are 5 bars) to have a white border that is 2px in width however when using the options mentioned above nothing changes
推荐答案
这是有关图表选项的信息:
This is the information about chart options:
https://developers.google.com/apps-script /reference/charts/chart-options
Google图表参考向您展示了如何使用样式角色:
The Google Charts Reference shows you how to use style roles:
柱形图的参考为您提供了如何在脚本中实现它们的示例:
And the reference for Column Charts gives you an example how to implement them in your script:
https://developers.google.com/chart/interactive/docs /gallery/columnchart
google.visualization.ColumnChart()，但是您可以在HTML文件中实现它，该HTML文件可以链接到您的.gs文件Apps Script.这是适用于您的案例的html代码，如下所示:
google.visualization.ColumnChart() is not directly supported by Apps Script, but you can implement it in a HTML file which you can link to your .gs file Apps Script. This is what a working html code for your case will look like:
<html>
<head>
<base target="_top">
</head>
<body>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var sampleData = google.visualization.arrayToDataTable([
["your x-values", "your columns", { role: "style" } ],
//adjust the x and y values
["x1", 5, 'stroke-width: 5;' + 'stroke-color: #cfff1d'],
["x2", 3, 'stroke-width: 5;' + 'stroke-color: #00001d'],
["x3", 10, 'stroke-width: 5;' + 'stroke-color: #cf001d'],
// ...
]);
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(sampleData);
}
google.script.run.drawChart();
</script>
<div id="chart_div"></div>
</body>
</html>
您还可以使用列角色:
https://developers.google.com/chart/interactive/docs/roles
这篇关于使用GAS图表设置条形边框的颜色和权重的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
