javascript - 如何在 amchart 4 中构建特定列系列
问题描述
我想创建特定于列的系列,例如 A 列只有两个系列, B 列只有三个系列。我已经通过数据做到了这一点,但它为没有值系列留出了空白。它在 A 列中为系列 3 创建了空白空间。我在屏幕截图中定义了我的问题,请参考它。先感谢您。
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>
解决方案
推荐阅读
- android - 使用另一个线程时,ProgressBar 不显示
- visual-studio-code - 键盘首选项中的搜索栏是否有 VS Code 快捷方式?
- angular - Angular 7/8 文件上传
- python - 将数据拆分为 3 列数据框
- spring - Spring Data MongoDB v3.x
- elasticsearch - logstash _grokparsefailure 用于非常简单的标签
- nginx - 从 Nginx 访问日志中去除单个 GET 查询参数并保留所有其他参数
- angular - 将对象子数组绑定到角度材质垫表
- perl - 符号链接函数创建死链接
- spring-kafka - Spring Kafka:事务性生产者错误处理