Как добавить закругленные углы для amcharts?

Я создаю карту. Он содержит некоторые данные диаграммы, для этого я хочу сделать закругленные углы для обеих сторон диаграммы.

Он работает, когда я добавил первый элемент во все данные диаграмм.

Я включил кодовую ссылку, которую я пробовал. 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
 }

javascript amcharts4 amcharts
person Meeravali    schedule 12.06.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вам нужно найти первый элемент в вашем 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>

person shrys    schedule 12.06.2019