Таблица форматирования таблицы диаграммы Google в процентах

Question

Я пытаюсь форматировать ячейку в таблице графиков Google в виде поля процента.

Для столбца он работает с:

var flow_format2 = new google.visualization.NumberFormat({suffix: '%', negativeColor: 'red', negativeParens: true, fractionDigits: 0}); 

Но, насколько я могу читать нет возможности для строки, поэтому я хотел бы сделать это на клеточном уровне - это возможно?

Это с setProperty Мне нужно это сделать и что такое синтаксис форматирования.

Answer 1

вы можете использовать formatValue метод NumberFormat получить отформатированную строку
вместо применения на весь столбец

, то вы можете вручную setFormattedValue на DataTable клетки
изменить цвет, использовать setProperty изменить 'style' свойство
ячейки график должен быть составлен после

--или--

когда 'ready' срабатывает событие на графике, вы можете изменить значение ячейки с помощью DOM
Table диаграмма дает нормальный набор HTML-теги <table>

Ниже приведен рабочий фрагмент кода, демонстрируя оба подхода ...

google.charts.load('current', { 
 
    callback: function() { 
 
    var dataTable = new google.visualization.DataTable({ 
 
     cols: [ 
 
     {label: 'Name', type: 'string'}, 
 
     {label: 'Amount', type: 'number'}, 
 
     ], 
 
     rows: [ 
 
     {c:[{v: 'Adam'}, {v: -1201}]}, 
 
     {c:[{v: 'Mike'}, {v: 2235}]}, 
 
     {c:[{v: 'Stephen'}, {v: -5222}]}, 
 
     {c:[{v: 'Victor'}, {v: 1288}]}, 
 
     {c:[{v: 'Wes'}, {v: -6753}]} 
 
     ] 
 
    }); 
 

 
    var container = document.getElementById('chart_div'); 
 
    var tableChart = new google.visualization.Table(container); 
 

 
    var patternFormat = { 
 
     suffix: '%', 
 
     negativeColor: '#FF0000', 
 
     negativeParens: true, 
 
     fractionDigits: 0 
 
    }; 
 

 
    // create the formatter 
 
    var formatter = new google.visualization.NumberFormat(patternFormat); 
 

 
    // format cell - first row 
 
    dataTable.setFormattedValue(0, 1, formatter.formatValue(dataTable.getValue(0, 1))); 
 
    if (dataTable.getValue(0, 1) < 0) { 
 
     dataTable.setProperty(0, 1, 'style', 'color: ' + patternFormat.negativeColor + ';'); 
 
    } 
 

 
    google.visualization.events.addOneTimeListener(tableChart, 'ready', function() { 
 

 
     // format cell via DOM - third row 
 
     var tableCell = container.getElementsByTagName('TR')[3].cells[1]; 
 
     tableCell.innerHTML = formatter.formatValue(dataTable.getValue(2, 1)); 
 
     if (dataTable.getValue(2, 1) < 0) { 
 
     tableCell.style.color = patternFormat.negativeColor; 
 
     } 
 

 
    }); 
 

 
    tableChart.draw(dataTable, { 
 
     allowHtml: true 
 
    }); 
 
    }, 
 
    packages: ['table'] 
 
});

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart_div"></div>