1
我在編程和新手有4個準則的表，由於我缺乏的技能和知識，我卡在我的問題。我試圖創建amcharts像這樣的表= >>This is the chart I need to create如何產生amcharts
但我只能成功創建表這樣= >>This is the chart I have made using amcharts 的問題是我不知道如何生成圖表的表。我已經看到了關於如何生成表格的一些教程，但圖表有一個類別，我不知道如何去做。
這
代碼我已經當我加入addInitHandler `
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="plugins/amcharts/amcharts.js" type="text/javascript"></script>
<script src="plugins/amcharts/serial.js" type="text/javascript"></script>
<style>
#chartdiv {
width: 900px;
max-width: 100%;
height: 300px;
border: 2px solid #eee;
border-bottom: none;
}
#chartdata {
width: 900px;
max-width: 100%;
border: 2px solid #eee;
border-top: none;
}
#chartdata * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#chartdata table {
width: 100%;
border-collapse: collapse;
}
#chartdata table th,
#chartdata table td {
text-align: center;
padding: 5px 7px;
}
#chartdata table th {
background: #999;
color: #fff;
}
#chartdata table td {
border: 1px solid #eee;
}
#chartdata table td.row-title {
font-weight: bold;
width: 150px;
}
</style>
<script>
/**
* A plugin to automatically creata a data table for the chart
* The plugin will check if the chart config has the following setting set: "dataTableId"
*/
AmCharts.addInitHandler(function(chart) {
// check if export to table is enabled
if (chart.dataTableId === undefined)
return;
// get chart data
var data = chart.dataProvider;
// create a table
var holder = document.getElementById(chart.dataTableId);
var table = document.createElement("table");
holder.appendChild(table);
var tr, td;
// construct table
for (var i = 0; i < chart.graphs.length; i++) {
// add rows
tr = document.createElement("tr");
table.appendChild(tr);
td = document.createElement("td");
td.className = "row-title";
td.innerHTML = chart.graphs[i].title;
tr.appendChild(td);
for (var x = 0; x < chart.dataProvider.length; x++) {
td = document.createElement('td');
td.innerHTML = chart.dataProvider[x][chart.graphs[i].valueField];
tr.appendChild(td);
}
}
}, ["serial"]);
/**
* Define chart data
*/
var chartData = [{
"category": "Operations-25",
"quarter": "25",
"averageyears":"0.1",
"numofemployees":"12"
},{
"category": "Operations-28",
"quarter": "28",
"averageyears":"3.00",
"numofemployees":"22"
},{
"category": "Operations-29",
"quarter": "29",
"averageyears":"5.00",
"numofemployees":"2"
},{
"category": "Operations-30",
"quarter": "30",
"averageyears":"6.02",
"numofemployees":"4"
},{
"category": "Main Office-25",
"quarter": "25",
"averageyears":"2.05",
"numofemployees":"12"
},{
"category": "Main Office-26",
"quarter": "26",
"averageyears":"4.05",
"numofemployees":"12"
},{
"category": "Main Office-27",
"quarter": "27",
"averageyears":"2.00",
"numofemployees":"12"
},{
"category": "Main Office-29",
"quarter": "29",
"averageyears":"1.05",
"numofemployees":"12"
},{
"category": "Main Office-30",
"quarter": "30",
"averageyears":"6.05",
"numofemployees":"12"
}]
}];
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"dataProvider": chartData,
"dataTableId": "chartdata",
"legend": {
"horizontalGap": 10,
"position": "bottom",
"useGraphSettings": true,
"markerSize": 10
},
"valueAxes": [{
"id":"v1",
"axisColor": "#FF6600",
"axisThickness": 2,
"axisAlpha": 1,
"position": "left",
"title":"Average Of Years in Service"
}, {
"id":"v2",
"axisColor": "#FCD202",
"axisThickness": 2,
"axisAlpha": 1,
"position": "right",
"title":"Number of Employees"
}],
"graphs": [{
"valueAxis": "v1",
"color": "#FF6600",
"type":"column",
"title": "Average Of Years in Service",
"valueField": "averageyears",
"columnWidth":0.6,
"fillAlphas": 0.8
}, {
"valueAxis": "v2",
"color": "#FCD202",
"type":"column",
"title": "Number of Employees",
"valueField": "numofemployees",
"clustered": false,
"columnWidth":0.3,
"fillAlphas": 0.8
}],
"categoryField": "category",
"categoryAxis": {
"gridPosition": "start",
"axisAlpha": 0.5,
"gridAlpha": 0,
"position": "left",
"fontSize": 12,
"boldLabels": "bold" ,
"guides": [ {
"category": "Main Office-25",
"toCategory": "Main Office-30",
"lineAlpha": 5,
"tickLength": 30,
"expand": true,
"label": "Chowking Main Office",
}, {
"category": "Operations-25",
"toCategory": "Operations-30",
"lineAlpha": 5,
"tickLength": 30,
"expand": true,
"label": "Chowking Operations",
} ],
"labelFunction": function(label, item) {
return item.dataContext.quarter;
}
}
});
</script>
</head>
<body>
<div id="chartdiv"></div>
<div id="chartdata"></div>
</body>
</html>
`
我看到的教程是https://www.amcharts.com/kbase/displaying-automatically-generated-table-data-synced-category-axis/ – linkundefined