1
Ich bin ein Neuling im Programmieren und aufgrund meines Mangels an Fähigkeiten und Wissen stecke ich an meinem Problem fest. Ich habe versucht, eine Tabelle wie folgt in amCharts erstellen = >>This is the chart I need to createWie erstelle ich eine Tabelle mit 4 Kriterien in Amcharts
aber ich kann nur erfolgreich eine Tabelle erstellen, wie dies = >>This is the chart I have made using amcharts Das Problem ist, ich weiß nicht, wie die Tabelle für das Diagramm zu erzeugen. Ich habe bereits ein Tutorial gesehen, wie man eine Tabelle generiert, aber das Diagramm hat eine Kategorie und ich habe keine Ahnung, wie es geht.
Dies ist der Code, den ich gemacht haben und es nicht aus, wenn ich die 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>
`
Das Tutorial, das ich sah, war https://www.amcharts.com/kbase/displaying-automatically-generated-table-dato-synced-category-axis/ – linkundefined