Установка цвета и веса границы полосы с помощью ГАЗ-карт - PullRequest
Новая
       13

Установка цвета и веса границы полосы с помощью ГАЗ-карт

0 голосов
/ 04 июля 2019

Я пытаюсь установить цвет и вес границы моих баров на столбчатой ​​диаграмме.

Я пытался использовать опцию 

        .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

1 Ответ

0 голосов
/ 05 июля 2019

Это информация о параметрах графика:

enter image description here

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

Справочник Google Charts показывает, как использовать роли стиля:

enter image description here

И ссылка на столбчатые диаграммы дает вам пример того, как реализовать их в вашем скрипте:

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

google.visualization.ColumnChart() напрямую не поддерживается скриптом приложения, но вы можете реализовать его в файле HTML, который вы можете связать со своим скриптом приложения .gs. Вот как будет выглядеть рабочий 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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...