我正在尝试构建amchart4的动态列图,其中我有4个系列的test_type = FA1,FA2,FA3和FA4,两列=数学和科学,现在数学具有两个值FA1和FA2,科学具有两个值FA3和FA4
现在发生了什么,我使用循环创建了系列,取决于系列test_type,现在在输出列1中,这是数学运算,它显示4个系列,其中两个条分别表示FA1,FA2和两个空白FA3,FA4 与第二栏中的科学相同,它显示了4系列,其中两个栏分别用于FA3,FA4和两个空白FA1,FA2
我用过amchart4
var data = JSON.parse(document.getElementById("chartdata").innerHTML);
var dataprovider = data.data;
var serieslist = data.test_type_list;
var chart = am4core.create("chartdiv", am4charts.XYChart);
chart.data = dataprovider;
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "suject";
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.renderer.minGridDistance = 30;
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
for (var i = 0; i < serieslist.length; i++) {
var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.valueY = serieslist[i];
series.dataFields.categoryX = "suject";
series.name = serieslist[i];
series.columns.template.tooltipText = serieslist[i] + ":[bold]{valueY}[/]";
series.columns.template.fillOpacity = .8;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//www.amcharts.com/lib/4/core.js"></script>
<script src="//www.amcharts.com/lib/4/charts.js"></script>
<div id="chartdiv"></div>
<div id="chartdata">{"data":[{"suject":"maths","fa1":"70"},{"suject":"maths","fa2":"20"},{"suject":"science","fa4":"10"},{"suject":"science","fa3":"80"}],"test_type_list":["fa1","fa2","fa3","fa4"]}</div>
我只需要那些具有序列值的列,例如在我的情况下,第一列中只有两个小节FA1和FA2的值是数学值,而没有空值或0值序列的值即FA3和FA4 >