html表格中能输入数据吗,HTML表格中定义的数据(Data defined in HTML table)

HTML表格中定义的数据(Data defined in HTML table)

以下是使用HTML表的柱形图的示例。

我们已经在Highcharts Configuration Syntax一章中看到了用于绘制图表的配置 。 现在让我们看看其他配置以及我们如何在数据下添加表格。

下面给出了使用HTML表的柱形图的示例。

data

数据模块提供了一个简化的界面，用于从CVS，HTML表格或网格视图等来源向图表添加数据。

data.table

HTML表或其id将被解析为输入数据。 相关选项是startRow，endRow，startColumn和endColumn，用于界定表的哪个部分使用。data: {

table: 'dataTable'

}

例子 (Example)

highcharts_column_table.htm

Highcharts Tutorial

$(document).ready(function() {

var data = {

table: 'datatable'

};

var chart = {

type: 'column'

};

var title = {

text: 'Data extracted from a HTML table in the page'

};

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

结果 (Result)

验证结果。

新页面打开