Настройка Google Charts Gauge Blue Circle

Мне нужно настроить синий круг из датчика Google Charts. Я вижу, что google-charts создает изображение svg. Есть ли способ изменить цвет центральной спирали или стрелки манометра. введите здесь описание изображения


charts google-visualization gauge
person Jorge Valvert    schedule 19.11.2018    source источник

Ответы (2)


arrow_upward
3
arrow_downward

стандартных параметров конфигурации нет,
но вы можете вручную изменить svg,
в событии 'ready' диаграммы

см. следующий рабочий фрагмент...

google.charts.load('current', {
  packages: ['gauge']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Label', 'Value'],
    ['Memory', 80],
    ['CPU', 55],
    ['Network', 68]
  ]);

  var options = {
    width: 400, height: 120,
    redFrom: 90, redTo: 100,
    yellowFrom:75, yellowTo: 90,
    minorTicks: 5
  };

  var container = document.getElementById('chart_div');
  var chart = new google.visualization.Gauge(container);

  google.visualization.events.addListener(chart, 'ready', function () {
    Array.prototype.forEach.call(container.getElementsByTagName('circle'), function(circle) {
      if (circle.getAttribute('fill') === '#4684ee') {
        circle.setAttribute('fill', '#5e35b1');
      }
    });
    Array.prototype.forEach.call(container.getElementsByTagName('path'), function(path) {
      if (path.getAttribute('stroke') === '#c63310') {
        path.setAttribute('stroke', '#00bcd4');
        path.setAttribute('fill', '#00bcd4');
      }
    });
  });

  chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

person WhiteHat    schedule 19.11.2018
comment
Я использую angular-google-charts, и вы дали мне отличную идею о том, как настроить центральный круг. - person Jorge Valvert; 19.11.2018
comment
WhiteHat — вы знали имена тегов «круг» и «путь». Есть ли документ, описывающий, как найти имена тегов, которые составляют весь SVG? Я не знаю, как анализировать AVG, чтобы найти имена тегов. - person Nick; 10.04.2020
comment
это помогает? --› ссылка на элемент SVG - person WhiteHat; 10.04.2020
comment
С точки зрения использования такой ссылки, если бы я хотел изменить цвет слова, отображаемого на датчике, как я мог бы использовать эту ссылку, чтобы найти этот тег? - person Nick; 10.04.2020
comment
Это просто ‹текст›? - person Nick; 10.04.2020
comment
Я нашел это! Это если (text.textContent === 'xxx') { ...! - person Nick; 10.04.2020

arrow_upward
0
arrow_downward

Благодаря @WhiteHat я смог изменить синий центральный круг по умолчанию. Я использую модуль angular-google-charts и, используя идею @WhiteHat, я настроил «ненастраиваемый» с помощью синего круга конфигурации:

HTML:

              <google-chart             
              [type]="'Gauge'" 
              [data] ="gaugeSales" 
              [options]="gaugeOptions" 
              [dynamicResize]="'true'"
              (ready)="this.customizeGauge()"
              >

ТС

customizeGauge()
{ 
  Array.prototype.forEach.call(document.getElementsByTagName('circle'), function(circle) {
    if (circle.getAttribute('fill') === '#4684ee') {
      circle.setAttribute('fill', '#5e35b1');
    }
  });
}
person Jorge Valvert    schedule 19.11.2018