Изменить непрозрачность области заливки в комбинированном графике (диаграммы Google) - PullRequest
Новая
       5

Изменить непрозрачность области заливки в комбинированном графике (диаграммы Google)

0 голосов
/ 23 сентября 2018

Я работал над комбинированной диаграммой (гистограмма + диаграмма рассеяния) диаграмм Google.Мне не удалось изменить непрозрачность точки данных и области заполнения внутри столбцов.В документации не было много информации, и я пытался изменить прозрачность, используя методы, упомянутые для других графиков, но ничего не помогло.

Вот ссылка на график, на котором я пытался работать - jsFiddle 

google.charts.load('current', {
    'packages': ['corechart']
  });
  google.charts.setOnLoadCallback(drawVisualization);

  function drawVisualization() {
    // Some raw data (not necessarily accurate)
    var sett = 'fill-color: #76A7FA; fill-opacity: 0.5; stroke-color: #76A7FA; stroke-width: 1;';
    var data = google.visualization.arrayToDataTable([
      ['Month', 'Bolivia', 'Average', {
        role: 'style'
      }],
      ['2004/05', 450, 614.6, sett],
      ['2005/06', 288, 682, sett],
      ['2006/07', 397, 623, sett],
      ['2007/08', 215, 609.4, sett],
      ['2008/09', 366, 569.6, sett],
      ['2009/05', 450, 614.6, sett],
    ]);

    var options = {
      title: 'Monthly Coffee Production by Country',
      vAxis: {
        title: 'Cups'
      },
      hAxis: {
        title: 'Month'
      },
      legend: 'none',
      fillOpacity: 0.3,
      pointShape: {
        type: 'triangle',
        rotation: 180
      },
      pointSize: 7,
      series: {
        0: {
          type: 'bars',
          areaOpacity: 0.3
        },
        1: {
          type: 'scatter',
          opacity: 0.5,
          color: 'blue'
        }
      }
    };

    var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  }

1 Ответ

0 голосов
/ 23 сентября 2018

вы можете использовать роль столбца 'style' для изменения непрозрачности,
, которая, как кажется, у вас есть

, однако роль стиля должна следовать за каждым столбцом серии, к которому вы хотите применить стиль

чтобы сделать столбцы непрозрачными, добавьте стиль после второго столбца,
см. Следующий рабочий фрагмент ... 

google.charts.load('current', {
  'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawVisualization);

function drawVisualization() {
  // Some raw data (not necessarily accurate)
  var sett = 'fill-color: #76A7FA; fill-opacity: 0.5; stroke-color: #76A7FA; stroke-width: 1;';
  var data = google.visualization.arrayToDataTable([
    ['Month', 'Bolivia', {role: 'style'}, 'Average', {role: 'style'}],
    ['2004/05', 450, sett, 614.6, sett],
    ['2005/06', 288, sett, 682, sett],
    ['2006/07', 397, sett, 623, sett],
    ['2007/08', 215, sett, 609.4, sett],
    ['2008/09', 366, sett, 569.6, sett],
    ['2009/05', 450, sett, 614.6, sett],
  ]);

  var options = {
    title: 'Monthly Coffee Production by Country',
    vAxis: {
      title: 'Cups'
    },
    hAxis: {
      title: 'Month'
    },
    legend: 'none',
    fillOpacity: 0.3,
    pointShape: {
      type: 'triangle',
      rotation: 180
    },
    pointSize: 7,
    series: {
      0: {
        type: 'bars',
        areaOpacity: 0.3
      },
      1: {
        type: 'scatter',
        opacity: 0.5,
        color: 'blue'
      }
    }
  };

  var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div" style="width: 100%; height: 500px;"></div>
...