Highcharts dados do formulário HTML usando um gráfico de barras
O exemplo a seguir demonstra o uso de dados do formulário gráfico de barras HTML.
Na seção anterior nós já sabemos Highcharts sintaxe de configuração básica. Vamos olhar para as outras configurações. Adicionando configuração tabela nos dados.
dados
módulo de dados fornece uma interface simples para adicionar dados, podemos usar os dados como CVS, tabela HTML ou vista de grelha.
data.table
tabela html definir id, e os parâmetros correspondentes data.table que é capaz de analisar os dados. opções de configurações são startRow, EndRow, StartColumn e EndColumn.
data: {
table: 'dataTable'
}
Exemplos
O nome do arquivo: 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>
O exemplo acima saída é: