我有多个功能图，这些图依赖于前一个。工作正常，但当我在其中添加切换按钮时出现问题，并尝试切换。功能再次需要数据。因此，如果没有重新构建图形，我想要从列到行切换图形类型。有没有办法这样做。帮助将不胜感激
var dataset = [{
"category": "category 1",
"column-1": 8,
"column-2": 5
},
{
"category": "category 2",
"column-1": 6,
"column-2": 7
},
{
"category": "category 3",
"column-1": 2,
"column-2": 3
}
]
AmCharts.makeChart("chartdiv", {
"type": "serial",
"categoryField": "category",
"startDuration": 1,
"categoryAxis": {
"gridPosition": "start"
},
"trendLines": [],
"graphs": [{
"balloonText": "[[title]] of [[category]]:[[value]]",
"fillAlphas": 1,
"id": "AmGraph-1",
"title": "graph 1",
"type": "column",
"valueField": "column-1"
},
{
"balloonText": "[[title]] of [[category]]:[[value]]",
"fillAlphas": 1,
"id": "AmGraph-2",
"title": "graph 2",
"type": "column",
"valueField": "column-2"
}
],
"guides": [],
"valueAxes": [{
"id": "ValueAxis-1",
"title": "Axis title"
}],
"allLabels": [],
"balloon": {},
"legend": {
"enabled": true,
"useGraphSettings": true
},
"titles": [{
"id": "Title-1",
"size": 15,
"text": "Chart Title"
}],
"dataProvider": dataset
});<!DOCTYPE html>
<html>
<head>
<title>chart created with amCharts | amCharts</title>
<meta name="description" content="chart created using amCharts live editor" />
<!-- amCharts javascript sources -->
<script type="text/javascript" src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="https://www.amcharts.com/lib/3/serial.js"></script>
<!-- amCharts javascript code -->
<script type="text/javascript">
</script>
</head>
<body>
<div id="chartdiv" style="width: 100%; height: 400px; background-color: #FFFFFF;"></div>
</body>
</html>您可以在图表中设置任何公共属性，并调用validateData()重绘图表，而无需再次提供整个数据集/ makeChart配置。假设您将图表实例存储到变量中：
chart.graphs.forEach(function(graph) {
graph.type = /* set new type */;
});
chart.validateData();
这是一个演示，可以在外部按钮单击上切换图形类型和其他可视方面：
var dataset = [{
"category": "category 1",
"column-1": 8,
"column-2": 5
},
{
"category": "category 2",
"column-1": 6,
"column-2": 7
},
{
"category": "category 3",
"column-1": 2,
"column-2": 3
}
]
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"categoryField": "category",
"startDuration": 1,
"categoryAxis": {
"gridPosition": "start"
},
"trendLines": [],
"graphs": [{
"balloonText": "[[title]] of [[category]]:[[value]]",
"fillAlphas": 1,
"id": "AmGraph-1",
"title": "graph 1",
"type": "column",
"valueField": "column-1"
},
{
"balloonText": "[[title]] of [[category]]:[[value]]",
"fillAlphas": 1,
"id": "AmGraph-2",
"title": "graph 2",
"type": "column",
"valueField": "column-2"
}
],
"guides": [],
"valueAxes": [{
"id": "ValueAxis-1",
"title": "Axis title"
}],
"allLabels": [],
"balloon": {},
"legend": {
"enabled": true,
"useGraphSettings": true
},
"titles": [{
"id": "Title-1",
"size": 15,
"text": "Chart Title"
}],
"dataProvider": dataset
});
document.getElementById('toggle-type').addEventListener('click', function() {
chart.graphs.forEach(function(graph) {
if (graph.type == "column") {
graph.type = "line";
graph.fillAlphas = 0;
graph.bullet = "round";
}
else {
graph.type = "column";
graph.fillAlphas = 1;
graph.bullet = undefined;
}
});
chart.validateData();
});<!DOCTYPE html>
<html>
<head>
<title>chart created with amCharts | amCharts</title>
<meta name="description" content="chart created using amCharts live editor" />
<!-- amCharts javascript sources -->
<script type="text/javascript" src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="https://www.amcharts.com/lib/3/serial.js"></script>
<!-- amCharts javascript code -->
<script type="text/javascript">
</script>
</head>
<body>
<button id="toggle-type">Toggle line/column</button>
<div id="chartdiv" style="width: 100%; height: 400px; background-color: #FFFFFF;"></div>
</body>
</html>