html柱形图怎么定义y轴,使用 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 教程 | 芝麻教程(web3.xin)

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