使用 HTML 表格数据的柱形图

Highcharts

Highcharts 教程 Highcharts 环境配置 Highcharts 配置语法 Highcharts 配置说明 Highcharts 曲线图基本曲线图带数据标签曲线图表异步加载数据曲线图时间序列，可缩放的图表 X 轴翻转曲线图带标记曲线图标示区曲线图不规则时间间隔图表对数图表 Highcharts 区域图基本区域图使用负数区域图堆叠区域图百分比堆叠区域图丢失值区域图反转x轴与y轴曲线区域图区间区域图使用区间和线的区域图 Highcharts 条形图基本条形图堆叠条形图反向条形图 Highcharts 柱形图基本柱形图使用负值的反向柱形图堆叠柱形图使用百分比的堆叠柱形图标签旋转柱形图固定布局柱形图使用 HTML 表格数据的柱形图区间柱形图 Highcharts 饼图基本饼图显示图例饼图圆环图半圈圆环图向下钻取饼图渐变饼图 Highcharts 散点图 Highcharts 气泡图动态图 Highcharts 组合图柱形图，线条图，饼图组合双Y轴, 柱形图，线条图组合多Y轴组合散点图上添加回归线 Highcharts 3D图 3D柱形图带空值(null)和0的3D柱形图堆叠3D柱形图 3D饼图 3D圆环图 Highcharts 测量图圆形进度条式测量图 Highcharts 时钟音量表（VU Meter） Highcharts 树状图(Treemap)

使用 HTML 表格数据的柱形图

以下实例演示了使用 HTML 表格数据的柱形图。

我们在前面的章节已经了解了 Highcharts 基本配置语法。接下来让我们来看下其他的配置。在 data 下添加 table 配置。

data

数据模块提供了一些简单的接口用于添加数据，我们可以使用例如 CVS, HTML 表格或者网格视图中的数据。

data.table

Html 表格中设置id，并对应参数 data.table 即能解析数据。相关设置选项有 startRow, endRow, startColumn 和 endColumn 。

1
2
3

data: {

table: 'dataTable'

}

实例

文件名：highcharts_column_table.htm

<html>

<head>

<title>Highcharts 教程 | 芝麻教程(web3.xin)</title>

</head>

<body>

$(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>

<thead>

</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>

上一篇:固定布局柱形图

下一篇:区间柱形图

我要发贴

Highcharts