Latest web development tutorials

Highcharts dati del modulo HTML usando un grafico a barre

Highcharts istogramma Highcharts istogramma

L'esempio seguente dimostra l'uso di grafico a barre dati del modulo HTML.

Nella sezione precedente che già conosciamo Highcharts sintassi di configurazione di base. Diamo un'occhiata ad altre configurazioni. Aggiunta configurazione della tabella dei dati.

dati

Modulo dati fornisce una semplice interfaccia per l'aggiunta di dati, siamo in grado di utilizzare i dati come CVS, tabella HTML o vista griglia.

data.table

tabella HTML Set ID, ei parametri corrispondenti data.table che è in grado di analizzare i dati. opzioni di impostazioni sono startRow, endRow, startColumn e endColumn. 

data: {
   table: 'dataTable'  
}

Esempi

Nome file: highcharts_column_table.htm 

<html>
<head>
<title>Highcharts 教程 | 本教程(w3big.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>

L'output sopra esempio è:

Highcharts istogramma Highcharts istogramma