Пользовательский цвет градиента для каждого среза amchart - PullRequest
Новая
       5

Пользовательский цвет градиента для каждого среза amchart

0 голосов
/ 15 февраля 2019

Как цвет среза в этой круговой диаграмме изменился на нужный цвет градиента без потери этого блестящего эффекта градиента.Для создания диаграммы я использовал amcharts, библиотеку JavaScript.

В коде каждый цвет среза генерируется автоматически. 

<!-- Styles -->
<style>
#chartdiv {
  width: 100%;
  height: 500px;
}

</style>

<!-- Resources -->
<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>

<!-- Chart code -->
<script>
// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end

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

// Add data
chart.data = [{
  "country": "Lithuania",
  "litres": 501.9
}, {
  "country": "Czech Republic",
  "litres": 301.9
}, {
  "country": "Ireland",
  "litres": 201.1
}, {
  "country": "Germany",
  "litres": 165.8
}, {
  "country": "Australia",
  "litres": 139.9
}, {
  "country": "Austria",
  "litres": 128.3
}, {
  "country": "UK",
  "litres": 99
}, {
  "country": "Belgium",
  "litres": 60
}, {
  "country": "The Netherlands",
  "litres": 50
}];

// Add and configure Series
var pieSeries = chart.series.push(new am4charts.PieSeries());
pieSeries.dataFields.value = "litres";
pieSeries.dataFields.category = "country";
pieSeries.innerRadius = am4core.percent(50);
pieSeries.ticks.template.disabled = true;
pieSeries.labels.template.disabled = true;

let rgm = new am4core.RadialGradientModifier();
rgm.brightnesses.push(-0.8, -0.8, -0.5, 0, - 0.5);
pieSeries.slices.template.fillModifier = rgm;
pieSeries.slices.template.strokeModifier = rgm;
pieSeries.slices.template.strokeOpacity = 0.4;
pieSeries.slices.template.strokeWidth = 0;

chart.legend = new am4charts.Legend();
chart.legend.position = "right";
</script>

<!-- HTML -->
<div id="chartdiv"></div>

1 Ответ

0 голосов
/ 15 февраля 2019

amcharts использует предопределенный набор цветов для стилизации диаграмм.Вы можете настроить этот набор цветов по-разному:

  • создать глобальную тему для вашего приложения ( документы )
  • создать собственный набор цветов только для одной диаграммы/ серия ( код ручки ) 
pieSeries.colors.list = [
    am4core.color("#845EC2"),
    am4core.color("#D65DB1"),
    am4core.color("#FF6F91"),
    am4core.color("#FF9671"),
    am4core.color("#FFC75F"),
    am4core.color("#F9F871")
];
  • установить индивидуальный цвет для каждого фрагмента независимо ( код ручки ) 
pieSeries.slices.template.propertyFields.fill = "color";
pieSeries.slices.template.propertyFields.stroke = "color";

Кроме того, вы можете добавить градиенты для стилизации диаграмм.

Здесь вы найдете еще несколько документов по цветам и градиентам в amcharts.

...