在html中怎么样写柱状图,Highcharts 使用 HTML 表格数据的柱形图

Highcharts 使用 HTML 表格数据的柱形图

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

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

data

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

data.table

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

table: 'dataTable'

}

实例

文件名：highcharts_column_table.htm

Highcharts 教程 | 菜鸟教程(runoob.com)

$(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 '' + this.series.name + '
' +

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);

});

JaneJohn

Apples34Pears20Plums511Bananas11Oranges24

以上实例输出结果为：