Удалить границу из графика времени Google - PullRequest
Новая
       40

Удалить границу из графика времени Google

1 голос
/ 17 января 2020

Мне нужно удалить границу графика с временной шкалы Google. Сценарий следующий: 

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">
  google.charts.load("current", {packages:["timeline"]});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    var container = document.getElementById('example5.4');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn({ type: 'string', id: 'Role' });
    dataTable.addColumn({ type: 'string', id: 'Name' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows([
      [ 'President', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
      [ 'President', 'John Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ],
      [ 'President', 'Thomas Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ]]);

    var options = {
      colors: ['#cbb69d', '#603913', '#c69c6e'],
    };

    chart.draw(dataTable, options);
  }

</script>

<div id="example5.4" style="height: 150px;"></div>

Мне нужно изменить с: введите описание изображения здесь на: введите описание изображения здесь

Кто-то можете мне помочь? Большое спасибо !!!

1 Ответ

0 голосов
/ 17 января 2020

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

здесь мы находим элемент диаграммы <rect>,
и удаляем штрих ... 

google.visualization.events.addListener(chart, 'ready', function () {
  var rects = container.getElementsByTagName('rect');
  Array.prototype.forEach.call(rects, function(rect) {
    // find chart <rect> element
    if ((rect.getAttribute('x') === '0') && (rect.getAttribute('y') === '0')) {
      // remove stroke from last <rect> element
      rect.setAttribute('stroke', 'none');
      rect.setAttribute('stroke-width', '0');
    }
  });
});

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

google.charts.load('current', {
  packages:['timeline']
}).then(drawChart);

function drawChart() {
  var container = document.getElementById('example5.4');
  var chart = new google.visualization.Timeline(container);
  var dataTable = new google.visualization.DataTable();
  dataTable.addColumn({ type: 'string', id: 'Role' });
  dataTable.addColumn({ type: 'string', id: 'Name' });
  dataTable.addColumn({ type: 'date', id: 'Start' });
  dataTable.addColumn({ type: 'date', id: 'End' });
  dataTable.addRows([
    [ 'President', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
    [ 'President', 'John Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ],
    [ 'President', 'Thomas Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ]]);

  var options = {
    backgroundColor: {
      //fill: 'red',
      stroke: 'red'
    },
    colors: ['#cbb69d', '#603913', '#c69c6e'],
  };

  google.visualization.events.addListener(chart, 'ready', function () {
    var rects = container.getElementsByTagName('rect');
    Array.prototype.forEach.call(rects, function(rect) {
      // find chart <rect> element
      if ((rect.getAttribute('x') === '0') && (rect.getAttribute('y') === '0')) {
        // remove stroke from last <rect> element
        rect.setAttribute('stroke', 'none');
        rect.setAttribute('stroke-width', '0');
      }
    });
  });

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