javascript - 如何在 amCharts 4 中勾勒出堆积条形图?
问题描述
我目前在 amCharts 4 中使用Stacked XYChart,并且只显示一个条形图:
我已经尝试将stroke
(and strokeWidth
& strokeOpacity
) 属性添加到几乎所有内容 - 系列、yAxes、xAxes 等,但它们都没有产生我希望的结果。我觉得我缺少一些明显的东西,所以任何帮助将不胜感激。
解决方案
既然您提到您只显示一列并假设这是一个 100% 堆叠的图表,那么您能做的最好的事情就是在图表上设置一个笔划plotContainer
:
chart.plotContainer.stroke = "#000000"
请注意,您的系列列需要将其高度设置为 100%,以便它将在容器 ( series.columns.template.height = am4core.percent(100)
) 内完全展开。
演示如下:
var chart = am4core.create("chartdiv", am4charts.XYChart);
chart.data = [{
"year": "2016",
"europe": 2.5,
"namerica": 2.5,
"asia": 2.1,
"lamerica": 0.3,
"meast": 0.2,
"africa": 0.1
}];
chart.legend = new am4charts.Legend();
chart.legend.position = "top";
chart.plotContainer.stroke = "#000000";
chart.plotContainer.strokeWidth = 5;
var categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "year";
categoryAxis.renderer.grid.template.opacity = 0;
categoryAxis.renderer.labels.template.disabled = true;
var valueAxis = chart.xAxes.push(new am4charts.ValueAxis());
valueAxis.min = 0;
valueAxis.max = 100;
valueAxis.strictMinMax = true;
valueAxis.renderer.grid.template.opacity = 0;
valueAxis.renderer.labels.template.disabled = true;
valueAxis.renderer.baseGrid.disabled = true;
valueAxis.calculateTotals = true;
function createSeries(field, name) {
var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.valueX = field;
series.dataFields.categoryY = "year";
series.dataFields.valueXShow = "totalPercent";
series.stacked = true;
series.name = name;
series.columns.template.height = am4core.percent(100);
}
createSeries("europe", "Europe");
createSeries("namerica", "North America");
createSeries("asia", "Asia");
createSeries("lamerica", "Latin America");
createSeries("meast", "Middle East");
createSeries("africa", "Africa");
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
#chartdiv {
width: 100%;
height: 200px;
}
<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script src="https://cdn.amcharts.com/lib/4/charts.js"></script>
<div id="chartdiv"></div>
推荐阅读
- python - 在数据框中查找分组数据的日期范围
- python - 如何在运行时将外部 jar 添加到 Spark 应用程序
- tableau-desktop - Tableau 将日期转换为当月的第一个日期
- c++ - 在 Release 构建中,为什么 boost::stacktrace::stacktrace() 仅当绝对 PDB 文件路径位于 exe/dll 文件中时才会生成解码的堆栈跟踪?
- c - 指向同一个地址问题的解释
- go - Flamingo:结构不可分配给接口
- oracle - ORA-03114 在 ASP.net-Core API 中发布到 IIS 后
- ios - Swift IOS:如何使用用户输入添加到列表数组?
- java - Does forcing a type into a variable make the whole statement into the inserted type?
- java - 在 Java 程序的 GUI 中打印结果的小问题