如何在amCharts 4中绘制堆积条形图的轮廓?

camer0

我目前在amCharts 4中使用Stacked XYChart,而我仅显示一个条形图:单堆积条形图

我试图弄清楚如何在整个上找到轮廓-像这样:在此处输入图片说明

我尝试将stroke(和strokeWidthstrokeOpacity)属性添加到几乎所有内容中-系列,yAxes,xAxes等,但是它们都不产生我想要的结果。我觉得我似乎缺少一些明显的东西,因此我们将不胜感激。

Xorspark

由于您提到的是只显示一列,并假设这是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>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

来自分类Dev

如何在ggplot中绘制堆积和分组的条形图?

来自分类Dev

如何为熊猫分组特征绘制堆积的条形图?

来自分类Dev

如何使用Pandas Python绘制堆积的条形图

来自分类Dev

如何在amCharts中创建分组的条形图?

来自分类Dev

如何更改amchart中堆积的条形图的颜色

来自分类Dev

堆叠堆积的条形图:如何控制每个堆积中条形的顺序

来自分类Dev

如何在熊猫中绘制条形图?

来自分类Dev

当数据不是周期性的时,如何基于堆积条形图绘制

来自分类Dev

如何在ggplot2中制作单个堆积的条形图

来自分类Dev

Python:如何使用matplotlib在python中绘制条形图?

来自分类Python

如何绘制并排分组的条形图

来自分类Dev

如何使用Pandas绘制条形图?

来自分类Dev

如何绘制分组的条形图?

来自分类Dev

如何动态设置堆积的条形图系列颜色?

来自分类Dev

如何对堆积的条形图进行动画处理?

来自分类Dev

如何在散景中以条形图绘制“分组依据”数据框

来自分类Dev

如何在DASH上绘制重叠/叠加的条形图?

来自分类Dev

如何在amCharts中设置RTL?

来自分类Dev

如何在amCharts 3中协调“ X”?

来自分类Dev

如何通过ggplot2 / R中填充类别之一的值来订购堆积条形图x类别

来自分类Dev

如何绘制海底条形图作为子图?

来自分类Dev

在熊猫中绘制部分堆积的条形图

来自分类Dev

从熊猫数据框中绘制堆积的条形图

来自分类Dev

如何在NetLogo中创建条形图,条形图并排放置

来自分类Dev

如何在堆积的条形图中设置系列的堆积顺序?

来自分类Dev

如何在Python中绘制条形图以显示不同类型商店类型的总销售额?

来自分类Dev

绘制堆积的条形图matplotlib熊猫

来自分类Python

熊猫-绘制堆积的条形图

来自分类Dev

如何在Altair中创建分组条形图?

TOP 榜单

  1. 1

    来自Microsoft Office加载项taskpane.js的MySQL驱动程序模块的空引用

  2. 2

    HikariPool-1-连接不可用,对于极小的负载服务器,请求在30000ms之后超时

  3. 3

    OpenJDK的和AdoptOpenJDK的区别

  4. 4

    任务':app:minifyReleaseWithR8'.java.lang.NullPointerException的执行失败(无错误消息)

  5. 5

    java.lang.NoClassDefFoundError:无法初始化类org.bytedeco.javacpp.avutil

  6. 6

    是什么在Android的consumer-rules.pro和proguard-rules.pro之间的区别?

  7. 7

    如何优化在Java中这种方法吗?我得到的时间超限

  8. 8

    错误TS1086:一个存取器不能在角9的环境上下文被声明

  9. 9

    java.lang.NoSuchFieldError的:ACCEPT_CASE_INSENSITIVE_VALUES

  10. 10

    如何在exoplayer中播放本地媒体文件的硬编码内容uri

  11. 11

    Keras提前停止回调错误,val_loss指标不可用

  12. 12

    在JavaScript中删除多个对象键值

  13. 13

    请问Spring事务管理工作与Spring WebFlux?

  14. 14

    未定义:grpc.SupportPackageIsVersion7 grpc.ServiceRegistrar

  15. 15

    如何在Python中将字典拆分成多个字典的列表,所有字典的大小均为N

  16. 16

    在IntelliJ IDEA中并行运行测试用例

  17. 17

    Java的无法解析日期的SimpleDateFormat

  18. 18

    tensorflow:仅在可用val_acc的情况下可以保存最佳模型,跳过

  19. 19

    无法装载动态库“libnvinfer.so.6”

  20. 20

    Java反射错误Java.lang.NoSuchMethodException,但是方法存在

  21. 21

    我在android studio中创建了clicker应用。但是,运行时,应用程序在调用“ incrementCount()”后崩溃。为什么?

热门标签

归档