Primeros pasos con chart.js

Instalación o configuración

Chart.js se puede incluir de varias maneras diferentes:

MNP

Ejecute el siguiente comando en el directorio de su proyecto NPM

npm install chart.js --save

CDN

Incluya una etiqueta de secuencia de comandos en su enlace HTML a la CDN de chart.js

<html>
   <body>    
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.bundle.min.js"></script>
   </body>
</html>

La última versión se puede encontrar en cdnjs.com/libraries/Chart.js.

Copia local

También se puede alojar una copia local en su servidor. Puede obtener la última versión de su [GitHub] (https://github.com/chartjs/Chart.js/releases).

<html>
   <body>    
      <script type="text/javascript" src="/Path/To/Chart.bundle.min.js"></script>
   </body>
</html>

Para obtener más información sobre cómo instalar chart.js, consulte www.chartjs.org/docs/.

Ejemplo de gráfico mínimo

Dependiendo de la versión de Chart.JS que esté utilizando (la actual es 2.X), la sintaxis es diferente para crear un ejemplo mínimo de un gráfico de barras ([JSFiddle Demo for 2.X](https://jsfiddle. net/ywdguuz7/2/)).

Gráfico.js 2.X

<html>
    <body>
        <canvas id="myChart" width="400" height="400"></canvas>
        <script>
              var ctx = document.getElementById("myChart");
              var myChart = new Chart(ctx, {
                  type: 'bar',
                  data: {
                      labels: ["Group 1", "Group 2", "Group 3"],
                      datasets: [{
                          label: 'Groups',
                          data: [12, 19, 3]
                      }]
                  }
              });
        </script>
    </body>
</html>

Puede encontrar una versión un poco más avanzada de esto en la documentación de chart.js ([JSFiddle Demo](https: //jsfiddle.net/ywdguuz7/1/)).


Gráfico.js 1.X

Sin embargo, si necesita usar la versión heredada, primero eche un vistazo a la [documentación en Github] (https://github.com/chartjs/Chart.js/tree/v1.1.1/docs).

Ahora aquí hay un ejemplo mínimo de un gráfico de barras (JSFiddle Demo) :

<html>
    <body>
        <canvas id="myChart" width="400" height="400"></canvas>
        <script>
            var ctx = document.getElementById("myChart");
            var myChart= new Chart(ctx).Bar({
                labels: ["Group 1", "Group 2", "Group 3"],
                datasets: [
                {
                    label: "Group",
                    data: [12, 19, 3]
                }]
            });
        </script>
    </body>
</html>

Puede encontrar una versión un poco más avanzada de esto en la documentación de Github (JSFiddle Demostración).