Question

我正在尝试在柱形图中设置条形边框的颜色和粗细。

我尝试使用该选项

        .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

Answer 1

这是有关图表选项的信息：

https://developers.google.com/apps-script/reference/charts/chart-options

Google图表参考向您展示了如何使用样式角色：

柱形图的参考为您提供了如何在脚本中实现它们的示例：

https://developers.google.com/chart/interactive/docs/gallery/columnchart

google.visualization.ColumnChart()不受Apps Script的直接支持，但是您可以在HTML文件中实现它，该HTML文件可以链接到您的.gs文件Apps Script。这是适用于您的案例的html代码，如下所示：

<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图表设置条形边框的颜色和权重

1 个答案: