Setting bar border color and weight using GAS char

2019-08-21 12:09发布

问题:

I am trying to set the color and weight of the border of my bars in a column chart.

I have tried using the option

        .setOption("stroke-width", 20)

However they don't change anything

         .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

回答1:

This is the information about chart options:

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

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() 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>

You could also work with Column Roles:

https://developers.google.com/chart/interactive/docs/roles