Trecho principal
Este trecho de código contém o princípio geral da script de gráfico:<table cellspacing=1 border=0>
<caption class="cab">{{ cabecalhos["graf"].nome }}</caption>
<tr>
<td v-for="barra in barras" valign=bottom>
<div class="vrBar" v-bind:style="{fontSize: tfonte}">{{ barra.altura}}</div>
<div class="barraH" v-bind:style="{height:barra.altura, backgroundColor: barra.cor, width: largura}">
</div>
<div class="txtBar" v-bind:style="{fontSize: tfonte}">{{ barra.campo}}</div>
</td>
</tr>
</table>
A formatação do gráficos se utiliza das facilidades providas pela tag TABLE. Estas facilidades são (1) dimensionamento dinâmico, (2) estabelecimento das colunas de forma bem definida, (3) oferecem parâmetros para espaçamento entre as colunas e (4) garantem a continuidade do gráfico em uma mesma região.
O conteúdo
O conteúdo, ou seja, as informações de cada barra a ser representada está no arranjo abaixo:var arrBarras = [
{ campo: '01', tipo: 'N', titulo: 'Mes 01', altura: 60, cor: '#002A36', checked: true, secao: 'graf' },
{ campo: '02', tipo: 'N', titulo: 'Mes 02', altura: 200, cor: '#402A36', checked: true, secao: 'graf' },
{ campo: '03', tipo: 'N', titulo: 'Mes 03', altura: 80, cor: '#802A36', checked: true, secao: 'graf' },
{ campo: '04', tipo: 'N', titulo: 'Mes 04', altura: 160, cor: '#C02A36', checked: true, secao: 'graf' },
{ campo: '05', tipo: 'N', titulo: 'Mes 05', altura: 90, cor: '#008A36', checked: true, secao: 'graf' },
{ campo: '06', tipo: 'N', titulo: 'Mes 06', altura: 80, cor: '#008A80', checked: true, secao: 'graf' },
{ campo: '07', tipo: 'N', titulo: 'Mes 07', altura: 140, cor: '#008AC0', checked: true, secao: 'graf' },
{ campo: '08', tipo: 'N', titulo: 'Mes 08', altura: 120, cor: '#008AF0', checked: true, secao: 'graf' },
{ campo: '09', tipo: 'N', titulo: 'Mes 09', altura: 80, cor: '#00CA80', checked: true, secao: 'graf' },
{ campo: '10', tipo: 'N', titulo: 'Mes 10', altura: 110, cor: '#00CAC0', checked: true, secao: 'graf' },
{ campo: 'FF', tipo: 'N', titulo: 'Mes 0N', altura: 80, cor: '#00FA36', checked: true, secao: 'graf' }
];
Ele fica armazenado no arquivo javascript GRAF_Opcoes.js, bem como o arranjo cabecalhos
var arrCabecalhos = {
graf:{nome:"GRÁFICO DE DESEMPENHO MENSAL", acao: "" },
traj:{ nome:"MAPA", acao:""}
};
Você deve estar estranhando o fato de que os nomes de variáveis utilizados na template HTML não batem com os nomes dos arranjos mostrados. Na seção data do objeto VUE é feita a associação, conforme colocamos abaixo:
var data = {
negrito: 'bold',
barras: arrBarras,
cabecalhos : arrCabecalhos,
cabecalho: 'SUPORTE',
largura: '20px',
tfonte: '10px',
action:'graf'
};
Aqui vemos a associação entre os nomes que serão usados na instanciação do VUE, na seção data . Mostramos a seção na instanciação do VUE, que segue:
var v1 = new Vue({
el: '#app',
data: data,
watch: {
barras: {
handler: function (linque) {
console.log("w: "+arguments.callee.name)
},
deep: true
}
},
});
A seção data aponta para as variáveis definidas no array JSON data mostrado anteriormente.
Código completo
<html><head>
<title>Graf 03</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
CAPTION {font-family: Arial;font-size:18px;padding-bottom: 50px;}
DIV.barraH {background-color:gray;vertical-align: bottom;float:clear;}
DIV.txtBar {float:clear;vertical-align: bottom;display: inline-block;font-family: Arial;font-size:10px;}
DIV.vrBar {float:clear;vertical-align: bottom;display: inline-block;font-family: Arial;font-size:10px;color:maroon;}
LABEL {font-family: Arial;font-size:12px;}
</style>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript" src="GRAF_Opcoes.js"></script>
<script type="text/javascript">
function init(){
// Comando 1
var data = {
negrito: 'bold',
barras: arrBarras,
cabecalhos : arrCabecalhos,
cabecalho: 'SUPORTE',
largura: '20px',
tfonte: '10px',
action:'graf'
};
// Comando 2
var v1 = new Vue({
el: '#app',
data: data,
watch: {
barras: {
handler: function (linque) {
console.log("w: "+arguments.callee.name)
},
deep: true
}
},
});
}
</script>
</head>
<body onload="init();">
<div id="app" class="container" align="center">
<table cellspacing=1 border=0>
<caption class="cab">{{ cabecalhos["graf"].nome }}</caption>
<tr>
<td v-for="barra in barras" valign=bottom>
<div class="vrBar" v-bind:style="{fontSize: tfonte}">{{ barra.altura}}</div>
<div class="barraH" v-bind:style="{height:barra.altura, backgroundColor: barra.cor, width: largura}">
</div>
<div class="txtBar" v-bind:style="{fontSize: tfonte}">{{ barra.campo}}</div>
</td>
</tr>
</table>
<label>Largura da barra:</label><select name="larg" v-model="largura">
<option value="15px">15px
<option value="20px">20px
<option value="25px">25px
<option value="30px">30px
<option value="35px">35px
<option value="40px">40px
<option value="45px">45px
<option value="50px">50px
</select>
<label>Tamanho da fonte:</label><select name="fonte" v-model="tfonte">
<option value="10px">10px
<option value="15px">15px
<option value="20px">20px
<option value="25px">25px
<option value="30px">30px
<option value="35px">35px
<option value="40px">40px
<option value="45px">45px
<option value="50px">50px
</select>
</div>
</body>
</html>
Nenhum comentário:
Postar um comentário