Сгруппированная диаграмма с закругленными краями в amchart4 - PullRequest
Новая
       5

Сгруппированная диаграмма с закругленными краями в amchart4

1 голос
/ 02 марта 2020

Я искал повсюду, но до сих пор не могу найти ответ, я сложил и сгруппировал диаграмму на своем веб-сайте (с помощью amchart4), например: Снимок экрана для диаграммы на моем веб-сайте , что я Если хотите, закройте край вершины диаграммы, чтобы диаграмма могла выглядеть так: Диаграмма с закругленным углом , я пытался добавить адаптер, основываясь на документации в amchart4: https://www.amcharts.com/docs/v4/tutorials/stacked-column-series-with-rounded-corners/

, но вместо этого, работая как шарм, моя диаграмма выглядит следующим образом: Моя диаграмма сейчас! где моя ошибка здесь?

Моя Js Код для amchart: 

am4core.ready(function() {
                // Create chart instance
                var chart = am4core.create('regional', am4charts.XYChart);

                // Add data
                chart.data = response.data;

                // Create axes  
                var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
                categoryAxis.renderer.grid.template.disabled = true;
                categoryAxis.dataFields.category = "regional";
                // Room for sub-category labels
                categoryAxis.renderer.labels.template.marginTop = 20;

                var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
                valueAxis.min = 0;

                // Create series
                function createSeries(field, name, stacked, color) {
                  var series = chart.series.push(new am4charts.ColumnSeries());
                  series.dataFields.valueY = field;
                  series.dataFields.categoryX = "regional";
                  series.name = name;
                  series.stroke = am4core.color(color);
                  series.fill = am4core.color(color);
                  // series.columns.template.tooltipText = "{name}: [bold]{valueY}[/]";
                  series.stacked = stacked;
                  series.columns.template.column.adapter.add("cornerRadiusTopLeft", cornerRadius);
                  series.columns.template.column.adapter.add("cornerRadiusTopRight", cornerRadius);

                  var bullet1 = series.bullets.push(new am4charts.LabelBullet());
                    bullet1.interactionsEnabled = false;
                    bullet1.label.text = "{valueY}";
                    bullet1.label.fontSize = 19;
                    bullet1.label.fill = am4core.color("#0d0b0b");
                    bullet1.locationY = 0.5;
                }

                // Fake series (display cluster label)
                function createLabelSeries(name) {
                  var series = chart.series.push(new am4charts.ColumnSeries());
                  series.dataFields.valueY = "zero";
                  series.dataFields.categoryX = "regional";
                  series.name = name;
                  series.hiddenInLegend = true;

                  var bullet = series.bullets.push(new am4charts.LabelBullet());
                  bullet.label.text = "{name}";
                  bullet.label.hideOversized = false;
                  bullet.label.paddingTop = 30;
                }

                // Corner
                function cornerRadius(radius, item) {
                  var dataItem = item.dataItem;

                  // Find the last series in this stack
                  var lastSeries;
                  chart.series.each(function(series) {
                    if (dataItem.dataContext[series.dataFields.valueY] && !series.isHidden && !series.isHiding) {
                      lastSeries = series;
                    }
                  });

                  // console.log(lastSeries.name);

                  // If current series is the one, use rounded corner
                  return dataItem.component == lastSeries ? 10 : radius;
                }

                chart.maskBullets = false;

                createLabelSeries("OPEN");
                createSeries("NCR_OPEN", "NCR OPEN", true, "#ff955c");
                createSeries("HCR_OPEN", "HCR OPEN", true, "#ff7429");
                createSeries("PCR_OPEN", "PCR OPEN", true, "#fa4300");

                createLabelSeries("CLOSE");
                createSeries("NCR_CLOSE", "NCR CLOSE", true, "#8870ff");
                createSeries("HCR_CLOSE", "HCR CLOSE", true, "#5d3dff");
                createSeries("PCR_CLOSE", "PCR CLOSE", true, "#370fff");

                // Legend
                chart.legend = new am4charts.Legend();
            })
...