问题描述
使用 amcharts 的雷达图我们如何增加雷达之间的距离以及如何处理标签名称重叠以防大标签名称以及它们是否可以根据标签名称长度使圆的半径动态化?或将标签名称包装在两行中?
codepen 链接 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);
// chart data
var wheel_data = [
{
'range': 'anothasdasdasdasdasdadadasdasder','data': [{
"category": "another","value": 10,"color": chart.colors.next(),}]
},{
'range': 'Your hapsadpiness','data': [{
"category": "your haasdppiness",{
'range': 'Your happiness','data': [{
"category": "your happiness",{
'range': 'Self Esteem','data': [{
"category": "self esteem","value": 6,"color": chart.colors.next()
}]
},{
'range': 'Your Mood','data': [{
"category": "your mood","value": 3,{
'range': 'Digital Usage','data': [{
"category": "digial usage","value": 7,{
'range': 'Job Satisfaction','data': [{
"category": "Job Satisfaction","value": 9,{
'range': 'your calmness','data': [{
"category": "sad","value": 5,{
'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);
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",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",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",target) => {
return -valueAxis.valuetoPoint(11.5).y; //asd
});
axisFill.adapter.add("radius",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",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>
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)