如何为 amcharts 添加圆角？

Question

我正在创建一个 amchart。它包含一些图表数据，为此我想为图表的两侧制作圆角。

当我在所有图表数据中添加第一个元素时它正在工作。

我已经包含了 codepen link 我试过的东西。 https://codepen.io/meeravali_shaik/pen/xobPOB

提前致谢。

chart.data = [{
 "country": "Lithuania",
  "research": 501.9,
  "marketing": 250,
  "sales": 199
}
, {
   "country": "Republic",
   //"research": 301.9,   // if commented radius is not effecting
   "marketing": 222,
   "sales": 251
 }

Answer 1

您需要找到 cornerRadius1 方法中的第一个元素。我使用标志变量仅获取堆叠条形图的第一条。查看以下内容：

am4core.useTheme(am4themes_animated);
am4core.useTheme(am4themes_dataviz);

// Create chart instance
var chart = am4core.create("chartdiv", am4charts.XYChart);

// Add data
chart.data = [{
  "country": "Lithuania",
  "research": 501.9,
  "marketing": 250,
  "sales": 199
}
, {
  "country": "Republic",
  //"research": 301.9,
  "marketing": 222,
  "sales": 251
}
];

// Create axes
var categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "country";
categoryAxis.title.text = "Local country offices";
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.renderer.minGridDistance = 20;


var  valueAxis = chart.xAxes.push(new am4charts.ValueAxis());
valueAxis.title.text = "Expenditure (M)";

// Create series
var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.valueX = "research";
series.dataFields.categoryY = "country";
series.name = "Research";
series.tooltipText = "{name}: [bold]{valueY}[/]";
series.stacked = true;
series.columns.template.column.adapter.add("cornerRadiusTopLeft", cornerRadius1);
series.columns.template.column.adapter.add("cornerRadiusBottomLeft", cornerRadius1);
series.columns.template.column.adapter.add("cornerRadiusBottomRight", cornerRadius);
series.columns.template.column.adapter.add("cornerRadiusTopRight", cornerRadius);

var series2 = chart.series.push(new am4charts.ColumnSeries());
series2.dataFields.valueX = "marketing";
series2.dataFields.categoryY = "country";
series2.name = "Marketing";
series2.tooltipText = "{name}: [bold]{valueY}[/]";
series2.stacked = true;
series2.columns.template.column.adapter.add("cornerRadiusTopLeft", cornerRadius1);
series2.columns.template.column.adapter.add("cornerRadiusBottomLeft", cornerRadius1);

series2.columns.template.column.adapter.add("cornerRadiusBottomRight", cornerRadius);
series2.columns.template.column.adapter.add("cornerRadiusTopRight", cornerRadius);

var series3 = chart.series.push(new am4charts.ColumnSeries());
series3.dataFields.valueX = "sales";
series3.dataFields.categoryY = "country";
series3.name = "Sales";
series3.tooltipText = "{name}: [bold]{valueY}[/]";
series3.stacked = true;
series3.columns.template.column.adapter.add("cornerRadiusTopLeft", cornerRadius1);
series3.columns.template.column.adapter.add("cornerRadiusBottomLeft", cornerRadius1);

series3.columns.template.column.adapter.add("cornerRadiusBottomRight", cornerRadius);
series3.columns.template.column.adapter.add("cornerRadiusTopRight", cornerRadius);

// Add cursor
chart.cursor = new am4charts.XYCursor();

function cornerRadius(radius, item) {
 var dataItem = item.dataItem;
 // Find the last series in this stack
 var lastSeries;
 chart.series.each(function(s) {
  if (dataItem.dataContext[s.dataFields.valueX] && !s.isHidden && !s.isHiding) {
   lastSeries = s;
  }
 });
  // If current series is the one, use rounded corner
  dataItem.component == lastSeries ? 100 : radius;
 return dataItem.component == lastSeries ? 10 : radius;
}

function cornerRadius1(radius, item) {
 var dataItem = item.dataItem;
 // Find the last series in this stack
 var firstSeries = chart.series.values[0];
  // If current series is the one, use rounded corner
  var flag = false;
  chart.series.each(function(s) {
  if (dataItem.dataContext[s.dataFields.valueX] && !s.isHidden && !s.isHiding && !flag) {
   firstSeries = s;
      flag = true;
  }
 });
  dataItem.component == firstSeries ? 100 : radius;
  // console.log(dataItem)
 return dataItem.component == firstSeries ? 10 : radius;
}
chart.legend = new am4charts.Legend();

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 9pt;
}

#chartdiv {
  width: 100%;
  height: 401px;
}

<script src="http://www.amcharts.com/lib/4/core.js"></script>
<script src="http://www.amcharts.com/lib/4/charts.js"></script>
<script src="http://www.amcharts.com/lib/4/themes/animated.js"></script>
<script src="http://www.amcharts.com/lib/4/themes/dataviz.js"></script>
<body>
<div id="chartdiv"></div>
</body>

如何为 amcharts 添加圆角？

How to add rounded corners for amcharts?

javascript

amcharts

amcharts4