Строка 1 визуализации Google не отображает .ColorFormat () при использовании .setProperty ()

Question

Я применил этот стиль к столбцу 1 простой таблицы.

  var formatterDateCol = new google.visualization.ColorFormat();
  formatterDateCol.addRange(null, dtHigh, 'black', 'pink');

Любая дата старше первого дня текущего месяца должна быть розовой.

Строка 1 не отображает .ColorFormat() Все остальные строки ниже этой отлично работают.

.ColorFormat() отлично работает, когда я удаляю следующий код, который устанавливает ширину столбца.

data.setProperty(0, 0, 'style', 'width: 100px;');

Почему он это делает? Я ценю любые отзывы о том, что я мог сделать по ошибке. Спасибо !!

google.charts.load('current', {
  packages: ['table']
}).then(function() {

  var data = new google.visualization.DataTable();
  data.addColumn('date', 'Date');
  data.addColumn('number', 'Revenues');

  var dt1 = new Date(moment().endOf('month').subtract(3, 'month'));
  var dt2 = new Date(moment().endOf('month').subtract(2, 'month'));
  var dt3 = new Date(moment().endOf('month').subtract(1, 'month'));
  var dt4 = new Date(moment().startOf('month'));
  var dt5 = new Date(moment().startOf('month').add(1, 'day'));
  var dt6 = new Date(moment().startOf('month').add(2, 'day'));

  data.addRows([
    [dt1, 10700],
    [dt2, -15400],
    [dt3, 12500],
    [dt4, -2100],
    [dt5, 22600],
    [dt6, 1100],
    [dt1, 10700],
    [dt2, -15400],
    [dt3, 12500],
    [dt4, -2100],
    [dt5, 22600],
    [dt6, 1100],
  ]);

  var groupView = google.visualization.data.group(
    data, [0], [{
      column: 1,
      aggregation: google.visualization.data.sum,
      type: 'number'
    }]);


  var dtHigh = new Date(moment().startOf('month'));

  var formatterDateCol = new google.visualization.ColorFormat();
  formatterDateCol.addRange(null, dtHigh, 'black', 'pink');

  formatterDateCol.format(data, 0);
  formatterDateCol.format(groupView, 0);

  //COMMENTING setProperty OUT RESOLVES THE PROBLEM - BUT I NEED THE COLUMN WIDTH TO BE SET

  //Column Widths - (row, column)
  data.setProperty(0, 0, 'style', 'width: 100px;');
  groupView.setProperty(0, 0, 'style', 'width: 100px;');

  var options = {
    allowHtml: true,
    showRowNumber: true,
    width: '100%',
    height: '100%'
  };

  var table1 = new google.visualization.Table(document.getElementById('table_div1'));
  var table2 = new google.visualization.Table(document.getElementById('table_div2'));

  table1.draw(data, options);
  table2.draw(groupView, options);

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
data - Row 1 does not display with ColorFormat. Row 7 contains the same date as Row 1 and it displays the ColorFormat.
<div id="table_div1"></div>

<p>
  <hr/>
</p>
groupView - Row 1 does not display with ColorFormat.
<div id="table_div2"></div>

Answer 1

ColorFormat() фактически делает то же самое,
он устанавливает свойство style для строк, которые должны быть выделены.
таким образом, установка ширины переопределяет уже примененный формат цвета.

, если вы использовали getProperty, вы увидите -> "color:black;background-color:pink;"

чтобы исправить, примените формат цвета, затем используйте getProperty, чтобы получить стиль, который он создает,
затем объедините это с шириной, когда используете setProperty ...

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

google.charts.load('current', {
  packages: ['table']
}).then(function() {

  var data = new google.visualization.DataTable();
  data.addColumn('date', 'Date');
  data.addColumn('number', 'Revenues');

  var dt1 = new Date(moment().endOf('month').subtract(3, 'month'));
  var dt2 = new Date(moment().endOf('month').subtract(2, 'month'));
  var dt3 = new Date(moment().endOf('month').subtract(1, 'month'));
  var dt4 = new Date(moment().startOf('month'));
  var dt5 = new Date(moment().startOf('month').add(1, 'day'));
  var dt6 = new Date(moment().startOf('month').add(2, 'day'));

  data.addRows([
    [dt1, 10700],
    [dt2, -15400],
    [dt3, 12500],
    [dt4, -2100],
    [dt5, 22600],
    [dt6, 1100],
    [dt1, 10700],
    [dt2, -15400],
    [dt3, 12500],
    [dt4, -2100],
    [dt5, 22600],
    [dt6, 1100],
  ]);

  var groupView = google.visualization.data.group(
    data, [0], [{
      column: 1,
      aggregation: google.visualization.data.sum,
      type: 'number'
    }]);

  var dtHigh = new Date(moment().startOf('month'));

  var formatterDateCol = new google.visualization.ColorFormat();
  formatterDateCol.addRange(null, dtHigh, 'black', 'pink');

  formatterDateCol.format(data, 0);
  formatterDateCol.format(groupView, 0);

  //COMMENTING setProperty OUT RESOLVES THE PROBLEM - BUT I NEED THE COLUMN WIDTH TO BE SET

  //Column Widths - (row, column)
  var style = data.getProperty(0, 0, 'style');
  data.setProperty(0, 0, 'style', style + 'width: 100px;');
  var style = groupView.getProperty(0, 0, 'style');
  groupView.setProperty(0, 0, 'style', style + 'width: 100px;');

  console.log(JSON.stringify(data.getProperty(0, 0, 'style')));

  var options = {
    allowHtml: true,
    showRowNumber: true,
    width: '100%',
    height: '100%'
  };

  var table1 = new google.visualization.Table(document.getElementById('table_div1'));
  var table2 = new google.visualization.Table(document.getElementById('table_div2'));

  table1.draw(data, options);
  table2.draw(groupView, options);

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
data - Row 1 does not display with ColorFormat. Row 7 contains the same date as Row 1 and it displays the ColorFormat.
<div id="table_div1"></div>

<p>
  <hr/>
</p>
groupView - Row 1 does not display with ColorFormat.
<div id="table_div2"></div>