Gráfico de barras de Highcharts usando datos de tabla HTML

Gráfico de barras de Highcharts

El siguiente ejemplo demuestra un gráfico de barras que usa datos de una tabla HTML.

Ya hemos aprendido la sintaxis de configuración básica de Highcharts en los capítulos anteriores. A continuación, veamos otras configuraciones. Añade la configuración table debajo de data.

data

El módulo de datos proporciona algunas interfaces simples para añadir datos. Podemos usar, por ejemplo, datos de CSV, tablas HTML o vistas de cuadrícula.

data.table

En la tabla HTML, establece el id y hazlo corresponder con el parámetro data.table para que los datos puedan ser analizados. Las opciones de configuración relacionadas incluyen startRow, endRow, startColumn y endColumn.

data: {
   table: 'dataTable'  
}

Ejemplo

Nombre de archivo: highcharts_column_table.htm

<html>
<head>
<title>Highcharts 教程 | Ejemplo(example.com)</title>
   <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="http://code.highcharts.com/highcharts.js"></script> 
   <script src="http://code.highcharts.com/modules/data.js"></script>     
</head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script language="JavaScript">
$(document).ready(function() { 
   var data = {
      table: 'datatable'
   };
   var chart = {
      type: 'column'
   };
   var title = {
      text: '从网页中的 HTML 表格中读取数据'   
   };      
   var yAxis = {
      allowDecimals: false,
      title: {
         text: 'Units'
      }
   };
   var tooltip = {
      formatter: function () {
         return '<b>' + this.series.name + '</b><br/>' +
            this.point.y + ' ' + this.point.name.toLowerCase();
      }
   };
   var credits = {
      enabled: false
   };  
      
   var json = {};   
   json.chart = chart; 
   json.title = title; 
   json.data = data;
   json.yAxis = yAxis;
   json.credits = credits;  
   json.tooltip = tooltip;  
   $('#container').highcharts(json);
});

</script>
<table id="datatable">
<thead>
<tr><th></th><th>Jane</th><th>John</th></tr>
</thead>
<tbody>
<tr><th>Apples</th><td>3</td><td>4</td></tr>
<tr><th>Pears</th><td>2</td><td>0</td></tr>
<tr><th>Plums</th><td>5</td><td>11</td></tr>
<tr><th>Bananas</th><td>1</td><td>1</td></tr>
<tr><th>Oranges</th><td>2</td><td>4</td></tr>
</tbody>
</table>
</body>
</html>

El resultado del ejemplo anterior es:

Gráfico de barras de Highcharts

Otras extensiones