javascript - 如何增加amcharts中的雷达半径
问题描述
使用 amcharts 的雷达图我们如何增加雷达之间的距离以及我们如何处理标签名称重叠以防大标签名称以及它们是否有任何方法可以根据标签名称长度使圆的半径动态化？或将标签名称包装在两行中？
代码笔链接https://codepen.io/omar630/pen/YzZVVGr
am4core.ready(function () {
// the chart
var chart = am4core.create("amchart_wheel_of_life", am4charts.RadarChart);
chart.hiddenState.properties.opacity = 0; // this creates initial fade-in
chart.responsive.enabled = true;
chart.innerRadius = am4core.percent(30);
chart.width = am4core.percent(100);
chart.height = am4core.percent(100);
chart.seriesContainer.zIndex = -1; // grid over series
//chart.seriesContainer.background.fill = '#0f0'
//chart.seriesContainer.opacity = 0.5
//chart.padding(20, 20, 20, 20);
// chart data
var wheel_data = [
{
'range': 'anothasdasdasdasdasdadadasdasder',
'data': [{
"category": "another",
"value": 10,
"color": chart.colors.next(),
}]
},{
'range': 'Your hapsadpiness',
'data': [{
"category": "your haasdppiness",
"value": 10,
"color": chart.colors.next(),
}]
},{
'range': 'Your happiness',
'data': [{
"category": "your happiness",
"value": 10,
"color": chart.colors.next(),
}]
}, {
'range': 'Self Esteem',
'data': [{
"category": "self esteem",
"value": 6,
"color": chart.colors.next()
}]
}, {
'range': 'Your Mood',
'data': [{
"category": "your mood",
"value": 3,
"color": chart.colors.next()
}]
}, {
'range': 'Digital Usage',
'data': [{
"category": "digial usage",
"value": 7,
"color": chart.colors.next()
}]
}, {
'range': 'Job Satisfaction',
'data': [{
"category": "Job Satisfaction",
"value": 9,
"color": chart.colors.next()
}]
}, {
'range': 'your calmness',
'data': [{
"category": "sad",
"value": 5,
"color": chart.colors.next()
}]
}, {
'range': 'stress level',
'data': [{
"category": "stress level",
"value": 2,
"color": chart.colors.next()
}]
}];
// interaction
var categoryIndex = 0;
chart.cursor = new am4charts.RadarCursor();
chart.cursor.innerRadius = am4core.percent(25);
chart.cursor.behavior = "none"; // disable zoom
//chart.cursor.lineX.disabled = true;
//chart.cursor.lineY.fillOpacity = 0.1;
//chart.cursor.lineY.fill = am4core.color("#000000");
//chart.cursor.lineY.strokeOpacity = 0;
//chart.cursor.fullWidthLineY = true;
chart.cursor.events.on("cursorpositionchanged", function (ev) { // up
var xAxis = ev.target.chart.xAxes.getIndex(0);
var yAxis = ev.target.chart.yAxes.getIndex(0);
categoryIndex = xAxis.positionToIndex(xAxis.toAxisPosition(ev.target.xPosition));
//console.log(yAxis.toAxisPosition(ev.target.yPosition));
//console.log("y: ", yAxis.positionToValue(yAxis.toAxisPosition(ev.target.yPosition)));
});
// var interaction = am4core.getInteraction();
// interaction.events.on("up", function (event) {
// var point = am4core.utils.documentPointToSprite(event.pointer.point, chart.seriesContainer);
// var empty = 4.2;
// var x = (valueAxis.max + empty) - valueAxis.xToValue(point.x);
// var y = (valueAxis.max + empty) - valueAxis.yToValue(point.y);
// var r = Math.sqrt(x * x + y * y) - empty;
// //console.log(x,y,r);
// if (r > valueAxis.min - 1 && r < valueAxis.max) {
// //console.log(r);
// setValue(categoryIndex, Math.ceil(r));
// }
// });
// set value
function setValue(index, value) {
chart.data[index].value = value;
chart.invalidateRawData();
}
// categoryAxis
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
// categoryAxis.renderer.lebels.template.background = 'black';
categoryAxis.dataFields.category = "category";
categoryAxis.renderer.labels.template.location = 0.5;
categoryAxis.renderer.tooltipLocation = 0.5;
categoryAxis.renderer.labels.template.bent = true;
categoryAxis.renderer.labels.template.padding(0, 0, 0, 0);
categoryAxis.renderer.labels.template.fill = am4core.color("#414042");
categoryAxis.renderer.labels.template.disabled = true; //hide label name
categoryAxis.renderer.grid.template.strokeDasharray = "1,2"
categoryAxis.renderer.labels.template.adapter.add("radius", (innerRadius, target) => {
return -valueAxis.valueToPoint(-3.8).y;
});
categoryAxis.tooltip.defaultState.properties.opacity = 0.; // hide tooltip
// categoryAxis.renderer.cellStartLocation = 0.2;
// categoryAxis.renderer.cellEndLocation = 0.8;
/*categoryAxis.renderer.axisFills.template.disabled = false;
categoryAxis.renderer.axisFills.template.fillOpacity = 1;
categoryAxis.renderer.axisFills.template.fill = am4core.color("#e7e8e8");
*/
// valueAxis
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
//valueAxis.renderer.labels.template.disabled = true;
valueAxis.renderer.labels.template.fill = am4core.color("#414042");
valueAxis.min = 0;
valueAxis.max = 10;
valueAxis.renderer.minGridDistance = 1;
valueAxis.fontSize = '10px';
// valueAxis.renderer.labels.template.adapter.add("dy", (innerRadius, target) => {
// return -valueAxis.valueToPoint(-3.7).y;
// });
// series
var series = chart.series.push(new am4charts.RadarColumnSeries());
series.columns.template.width = am4core.percent(100);
series.columns.template.strokeWidth = 0;
series.columns.template.column.propertyFields.fill = "color";
series.dataFields.categoryX = "category";
series.dataFields.valueY = "value";
// series tootltip
series.columns.template.tooltipText = "{categoryX}: {valueY.value}";
series.tooltip.getFillFromObject = false;
series.tooltip.background.fill = am4core.color("#f7aa00");
series.tooltip.label.fill = am4core.color("#414042");
series.tooltip.label.fontWeight = 'bold';
series.tooltip.background.strokeOpacity = 0;
series.columns.template.height = am4core.percent(110);
// center image
var image = categoryAxis.createChild(am4core.Image);
image.horizontalCenter = "middle";
image.verticalCenter = "middle";
image.href = "https://s/icon-512x512.png";
image.width = am4core.percent(23);
image.height = am4core.percent(23);
// image.zIndex = 1; // grid over series
var circle = chart.seriesContainer.createChild(am4core.Circle);
circle.horizontalCenter = "middle";
circle.verticalCenter = "middle";
circle.fill = am4core.color('#e7e8e8');
circle.zIndex = -5; // grid over seriesd
categoryAxis.events.on('sizechanged', (ev) => {
circle.radius = -valueAxis.valueToPoint(11.5).y; //asd
});
function generateRadarData() {
let data = [];
for (let i in wheel_data) {
// capitalize
for (let t in wheel_data[i].data) {
wheel_data[i].data[t].category = wheel_data[i].data[t].category.toUpperCase();
}
data = data.concat(wheel_data[i].data);
createRange(wheel_data[i].range, wheel_data[i].data, i);
}
//console.log(data);
return data;
}
function createRange(name, data, index) {
let axisRange = categoryAxis.axisRanges.create();
axisRange.text = name.toUpperCase();
// first country
axisRange.category = data[0].category;
// last country
axisRange.endCategory = data[data.length - 1].category;
// range grid
//axisRange.grid.disabled = true;
axisRange.label.mouseEnabled = false;
axisRange.grid.stroke = am4core.color("#FFFFFF");
axisRange.grid.strokeWidth = 1;
axisRange.grid.strokeOpacity = 1;
axisRange.grid.strokeDasharray = "0,0";
axisRange.grid.adapter.add("radius", (innerRadius, target) => {
return -valueAxis.valueToPoint(13.8).y;
});
// range background
let axisFill = axisRange.axisFill;
axisFill.fill = data[0].color; // chart.colors.next
axisFill.disabled = false;
axisFill.fillOpacity = 1;
axisFill.adapter.add("innerRadius", (innerRadius, target) => {
return -valueAxis.valueToPoint(11.5).y; //asd
});
axisFill.adapter.add("radius", (innerRadius, target) => {
return -valueAxis.valueToPoint(13.8).y; //asd
});
//axisFill.togglable = true;
//axisFill.showSystemTooltip = true;
//axisFill.readerTitle = "click to zoom";
//axisFill.cursorOverStyle = am4core.MouseCursorStyle.pointer;
// range label
let axisLabel = axisRange.label;
axisLabel.location = 0.5;
axisLabel.fill = am4core.color("#414042");
axisLabel.fontWeight = 'bold';
axisLabel.fontSize = '10px';
axisLabel.adapter.add("radius", (innerRadius, target) => {
return -valueAxis.valueToPoint(-1.9).y; //asd
});
}
chart.data = generateRadarData();
});#amchart_wheel_of_life {
width: 100%;
height: 98vh;
font-family:arial;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script src="https://cdn.amcharts.com/lib/4/charts.js"></script>
<script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>
<div id="amchart_wheel_of_life"></div>解决方案
推荐阅读
- python - 当我在 Keras 中加载保存的模型时，输入会丢失，其中包含需要多个输入的自定义损失
- mysql - SQL Sum, Subtraction 将 4 个表与 where 连接起来
- c# - 数据表和剑道网格
- matlab - 0.2104 + 0.0000i 在 MATLAB 中是什么意思
- gesture - PDFKit 手势问题在升级到 IOS 13 后停止工作
- ios - 如何在 Swiftui 中更改数组项
- django - 带有 JWT 的 Django。如何使用两者？使用来自 restframework-jwt 的 JWT 令牌认证机制来访问 django-admin
- laravel - 如何使用 id 的查询来进行另一个具有 eloquent 的查询 - Laravel
- c# - 代码架构：Xamarin 中特定于 Android 的 XAML
- git - 当通过 git checkout BranchA 连接到 BranchA 时，如果我执行 git pull BranchB 那么 BranchB 代码会被拉到 BranchA 中吗？