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

1

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

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

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

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

.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>
Теги:
google-visualization

1 ответ

1
Лучший ответ

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

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

исправить, применить формат цвета, а затем использовать getProperty для извлечения 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>
Поделиться
  • 0
    Спасибо за быстрый ответ! Как вы предложили, я установил ширину до цветового формата. Можете ли вы проверить свой пример? Я думаю, что теперь потерял ширину в этом порядке.
  • 0
    глупый я, я думал, что Google не будет переопределять стиль, который уже существует, изменил ответ выше ...
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню