Highcharts formulario HTML de datos utilizando un gráfico de barras
Highcharts gráfico de columnas
El siguiente ejemplo muestra el uso del formulario de datos de gráfico de barras HTML.
En la sección anterior que ya sabemos Highcharts sintaxis de configuración básica. Veamos las otras configuraciones. Adición de configuración de la tabla en los datos.
datos
módulo de datos proporciona una interfaz simple para agregar datos, podemos utilizar los datos como CVS, tabla HTML o de cuadrícula.
data.table
tabla html Identificación de conjunto, y los parámetros correspondientes data.table que es capaz de analizar los datos. opciones de configuración son startRow, Filafinal, StartColumn y EndColumn.
data: { table: 'dataTable' }
Ejemplos
Nombre del archivo: 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>
La salida del ejemplo anterior es: