Как выровнять градиенты на графике Guage Amcharts Solid - PullRequest
Новая
       38

Как выровнять градиенты на графике Guage Amcharts Solid

0 голосов
/ 30 апреля 2020

Current implementation

Expected gradient look

Я пытаюсь получить градиент, который следует кривой окружности в (amcharts4 , solid диаграмма Гугге). Я пытался использовать линейный градиент. Код ниже. Эта реализация не может следовать кривой окружности. Функция RadialGradient () также не работает, так как создает концентрический c градиент, начиная с внутреннего радиуса до внешнего радиуса круга.

Ожидание предложений. 

// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end



// Create chart instance
var chart = am4core.create("chartdiv", am4charts.RadarChart);
      var gradient = new am4core.LinearGradient();

gradient.addColor(am4core.color("red"));   gradient.addColor(am4core.color("green"));
gradient.addColor(am4core.color("yellow"));   gradient.addColor(am4core.color("blue"));
gradient.addColor(am4core.color("orange")); 
gradient.rotation = 25;
// Add data
chart.data = [{
  "category": "Research",
  "value": 0,
  "full": 100,
  "color":gradient
}, {
  "category": "Marketing",
  "value": 0,
  "full": 100,
  "color":"grey"
}, {
  "category": "Distribution",
  "value": 0,
  "full": 100,
  "color":"grey"
}, {
  "category": "Human Resources",
  "value": 100,
  "full": 100,
  "color":"grey"
}];

// Make chart not full circle
chart.startAngle = -90;
chart.endAngle = 180;
chart.innerRadius = am4core.percent(20);

// Set number format
chart.numberFormatter.numberFormat = "#.#'%'";

// Create axes
var categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "category";
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.renderer.grid.template.strokeOpacity = 0;
categoryAxis.renderer.labels.template.horizontalCenter = "right";
categoryAxis.renderer.labels.template.fontWeight = 500;

categoryAxis.renderer.minGridDistance = 10;

var valueAxis = chart.xAxes.push(new am4charts.ValueAxis());
valueAxis.renderer.grid.template.strokeOpacity = 0;
valueAxis.min = 0;
valueAxis.max = 100;
valueAxis.strictMinMax = true;

// Create series
var series1 = chart.series.push(new am4charts.RadarColumnSeries());
series1.dataFields.valueX = "full";
series1.dataFields.categoryY = "category";
series1.clustered = false;
series1.columns.template.radarColumn.propertyFields.fill = "color";
series1.columns.template.radarColumn.propertyFields.stroke = "color";
series1.columns.template.fillOpacity = 1;
series1.columns.template.cornerRadiusTopLeft = 20;
series1.columns.template.strokeWidth = 0;
series1.columns.template.radarColumn.cornerRadius = 20;



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