如何在html中自动生成条形图,Highcharts 柱形图（柱状图及条形图）之通过HTML表格数据创建的柱状图演示...

JS 代码：

var chart = Highcharts.chart('container', {

data: {

table: 'datatable'

},

chart: {

type: 'column'

},

title: {

text: '从 HTML 表格中提取数据并生成图表'

// 该功能依赖 data.js 模块，详见https://www.hcharts.cn/docs/data-modules

},

yAxis: {

allowDecimals: false,

title: {

text: '个',

rotation: 0

}

},

tooltip: {

formatter: function () {

return '' + this.series.name + '
' +

this.point.y + ' 个' + this.point.name.toLowerCase();

}

}

});

HTML 代码：

/* css 代码 */

数据表格

小张小潘

苹果34梨20葡萄51香蕉11橘子24

// JS 代码

//css

#datatable {

border: 1px solid #ccc;

border-collapse: collapse;

border-spacing: 0;

font-size: 12px;

}

td,th {

border: 1px solid #ccc;

padding: 4px 20px;

}