Javascript 每个图表切片的自定义渐变颜色
如何将饼图中切片的颜色更改为所需的渐变颜色,而不丢失明亮的渐变效果。我使用Javascript 每个图表切片的自定义渐变颜色,javascript,html,amcharts,Javascript,Html,Amcharts,如何将饼图中切片的颜色更改为所需的渐变颜色,而不丢失明亮的渐变效果。我使用amcharts,一个JavaScript库来创建图表 在中,将自动生成每个切片颜色 <!-- Styles --> <style> #chartdiv { width: 100%; height: 500px; } </style> <!-- Resources --> <script src="https://www.amcharts.com/lib/4
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>
#沙特迪夫{
宽度:100%;
高度:500px;
}
//主题开始
am4core.useTheme(am4themes_动画);
//主题结束
//创建图表实例
var chart=am4core.create(“chartdiv”,am4charts.PieChart);
//添加数据
chart.data=[{
“国家”:“立陶宛”,
“升”:501.9
}, {
“国家”:“捷克共和国”,
“升”:301.9
}, {
“国家”:“爱尔兰”,
“升”:201.1
}, {
“国家”:“德国”,
“升”:165.8
}, {
“国家”:“澳大利亚”,
“升”:139.9升
}, {
“国家”:“奥地利”,
“升”:128.3升
}, {
“国家”:“英国”,
“升”:99
}, {
“国家”:“比利时”,
“升”:60
}, {
“国家”:“荷兰”,
“升”:50
}];
//添加和配置系列
var piesteries=chart.series.push(新的am4charts.piesteries());
pieSeries.dataFields.value=“升”;
pieSeries.dataFields.category=“国家”;
pieSeries.innerRadius=AM4孔径百分比(50);
pieSeries.ticks.template.disabled=true;
pieSeries.labels.template.disabled=true;
设rgm=新的am4core.RadialGradientModifier();
rgm亮度推力(-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=新的am4charts.legend();
chart.legend.position=“右”;
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";