manual_cadem/torta.html at master · karihigh/manual_cadem · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Manual reportes web</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/custom.css" rel="stylesheet">
    <link rel='shortcut icon' type='image/x-icon' href="favicon.ico"/>
    <link href="https://fonts.googleapis.com/css?family=Asap:400,500,600,700" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet">
</head>
<body>
  <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>
    </div>
    <div class="collapse navbar-collapse" id="navbar">
      <div class="row">
        <div class="col-md-offset-3">
          <ul class="nav navbar-nav">
            <li>
              <a href="index.html" class="dpd-menu">Introducción</span></a>
            </li>
            <li class="dropdown">
              <a href="proceso.html" class="dropdown-toggle dpd-menu" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Proceso<span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="proceso.html">Etapa 1</a></li>
                <li><a href="etapa2.html">Etapa 2</a></li>
                <li><a href="etapa3.html">Etapa 3</a></li>
                <li><a href="etapa4.html">Etapa 4</a></li>
                <li><a href="etapa5.html">Etapa 5</a></li>
              </ul>
            </li>
            <li class="dropdown">
              <a href="graficos.html" class="dropdown-toggle dpd-menu" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Biblioteca de Gráficos<span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="torta.html">Gráfico de torta</a></li>
                <li><a href="linea.html">Gráfico de línea</a></li>
                <li><a href="barra.html">Gráfico de barra</a></li>
                <li><a href="barra_apilada.html">Gráfico de barra apilada</a></li>
                <li><a href="barra_integrada.html">Gráfico de barra agrupada</a></li>
                <li><a href="linea_barra.html">Gráfico de línea y barra</a></li>
                <li><a href="burbuja.html">Gráfico de burbuja</a></li>
                <li><a href="rendimiento.html">Gráfico de rendimiento</a></li>
              </ul>
            </li>
            <li>
              <a href="intro.html" class="dpd-menu">Recursos visuales</a>
            </li>
          </ul>
        </div>
        <div class="col-md-offset-2">
          <ul class="nav navbar-nav navbar-right">
            <li><a href="index.html"><img src="logo.png"></a></li>
          </ul>
        </div>
      </div>
    </nav>
    <div class="feature">
      <div class="row">
        <div class="col-md-6 col-md-offset-3">
          <h1>GRÁFICO DE TORTA</h1>
          <hr>
        </div>
      </div>
    </div>
    <div style="margin-top: 70px;">
      <div class="row">
        <div class="col-md-6 col-md-offset-3">
          <p>Gráfico circular dividido en partes que muestra proporciones</p>
          <h4>CRITERIOS DE ELECCIÓN</h4>
          <hr>
          <p>Usar cuando se cuenta con datos que suman un total y se necesita destacar el porcentaje que ocupa cada variable en comparación a su total.</p>
          <div class="row">
            <div class="col-md-4">
              <table class="table table-bordered" style="margin-top: 20px;">
                <tr>
                  <td>Mínimo de variables</td>
                  <td>2</td>
                </tr>
                <tr>
                  <td>Máximo de variables</td>
                  <td>6</td>
                </tr>
              </table>
            </div>
          </div>
          <h4>CRITERIOS DE IMPLEMENTACIÓN</h4>
          <hr>
          <p>Existen dos anchos de gráficos de torta y la decisión de cuál utilizar dependerá de la composición general del <a href="etapa5.html">dashboard</a>.
          <h6>Variaciones de tamaño</h6>
          <div class="row">
            <div class="col-md-5">
              <p>4 de 12 columnas</p>
            </div>
            <div class="col-md-7">
              <p>6 de 12 columnas</p>
            </div>
            <div class="row">
            <div class="col-md-5">
              <img src="assets/torta4.png" style="width: 100%">
            </div>
            <div class="col-md-7">
              <img src="assets/torta6.png" style="width: 105%">
            </div>
          </div>
          <h6>Uso del color</h6>
          <p>Este gráfico no tiene variación de color, solo se ocupa la <a href="intro.html">paleta primaria</a></p>
          <hr style="margin-top: 70px;">
          <a href="etapa4.html"><div class="btn btn-primary pull-left next-btn"><span class="glyphicon glyphicon-menu-left"></span> ANTERIOR</div></a>
          <a href="linea.html"><div class="btn btn-primary pull-right next-btn">SIGUIENTE <span class="glyphicon glyphicon-menu-right"></span></div></a>
        </div>
      </div>
    </div>
  </body>
  <script src="js/jquery-1.11.3.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script src="js/ie10-viewport-bug-workaround.js"></script>
	<script src="js/holder.min.js"></script>
</html>