Concluí com sucesso uma tabela de visualização do google com dados provenientes do banco de dados. Agora preciso adicionar uma classificação personalizada apenas para uma coluna. Ex eu tenho uma coluna como Status para exibir o nível da instância. Ele tem vários limites, como ok, crítico, etc. Quando eu uso a ordem de classificação atual, ela exibe linhas de 'ok' no topo. Em vez disso, preciso exibir primeiro as linhas "críticas". Para fazer isso eu tenho outra coluna como nível 1 para 'crítico', 2 para 'ok' etc. O que eu preciso fazer é quando o usuário tentar classificar a coluna 'Status', essa coluna deve classificar de acordo com o 'nível'.
google.visualization.events.addListener(table, 'sort',
function(event) {
if(event.column == 4){
console.log("sorting column is "+event.column);
data.sort([{column: event.column, desc: !event.ascending}]);
chart.draw(view);
}
});
como adicionar ordem de classificação (classificar com nível) para a coluna Status?
Qualquer ajuda seria apreciada.
aqui estão algumas opções para a classificação personalizada de um gráfico de tabela ...
primeiro , você pode usar a notação de objeto para combinar os valores de ambas as colunas ...
defina o valor ( v:) como Nível e o valor formatado ( f:) como Status
{v: 1, f: 'Critical'}
por padrão, o gráfico da Tabela usará o valor para classificar
você também pode usar um DataViewpara adicionar a coluna de um cálculo
único problema aqui, o tipo de coluna deve ser 'number', porque esse é o valor ...
o gráfico irá alinhar à direita as células daquela coluna
se você já tem formatação personalizada, não é grande coisa, você pode usar csspara corrigir, como no exemplo
a seguir , para customizar a classificação usando o sortevento ...
defina a opção de configuração -> sort: 'event'
isso informa que a classificação personalizada do gráfico está sendo usada e para exibir o data"como ordenado"
você também deve fornecer as duas opções de configuração a seguir
sortAscending: true,
sortColumn: 0
isso diz ao gráfico onde colocar a seta de classificação nos títulos das colunas (setas para cima / para baixo)
então, se você substituir a classificação da coluna 1 por 0,
ainda será necessário definir a opção de configuração ->sortColumn: 1
veja o seguinte snippet de trabalho,
a classificação para a coluna 1 (status) é substituída pela coluna 0 (nível)
coluna 2 (classificação) usa a notação de objeto como mencionado acima
google.charts.load('current', {
callback: function () {
var data = google.visualization.arrayToDataTable([
['Level', 'Status', 'Sort'],
[1, 'Critical', {v: 1, f: 'Critical'}],
[2, 'OK', {v: 2, f: 'OK'}],
[3, 'Warning', {v: 3, f: 'Warning'}],
[4, 'Message', {v: 4, f: 'Message'}]
]);
var options = {
allowHtml: true,
cssClassNames: {
tableCell: 'googleTableCell'
},
sort: 'event',
sortAscending: true,
sortColumn: 0
};
var chart = new google.visualization.Table(document.getElementById('chart_div_table'));
google.visualization.events.addListener(chart, 'sort', function (sender) {
var sortColumn;
// custom sort data
switch (sender.column) {
case 1:
sortColumn = 0;
break;
default:
sortColumn = sender.column;
}
data.sort([{column: sortColumn, desc: !sender.ascending}]);
// display normal column sort arrow
options.sortAscending = sender.ascending;
options.sortColumn = sender.column;
chart.draw(data, options);
});
chart.draw(data, options);
},
packages: ['table']
});.googleTableCell {
text-align: left !important;
}<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div_table"></div>Este artigo é coletado da Internet.
Se houver alguma infração, entre em [email protected] Delete.
deixe-me dizer algumas palavras