Как мне избавиться от этого искажения amCharts? - PullRequest
Новая
       13

Как мне избавиться от этого искажения amCharts?

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

Я хочу показать рейтинг своих пользователей, используя библиотеку amCharts Javascript.Пользователи ранжируются следующим образом (это хорошо и без проблем):

enter image description here

Проблема в том, если у меня два идентичных имени профиля (например, если яиметь два имени Сары в качестве имени профиля или даже два похожих предложения слогана) что-то подобное происходит: (Здесь я изменил Джона на Сару, поэтому у нас есть две Сары)

Примечание: вся текстовая область уменьшается, как показано стрелками.и кажется, что я потерял одну из этих Saras (теперь я вижу только 5 профилей вместо 6 профилей).

enter image description here

Плюс я нашел этот код и этот в демоверсиях amCharts, который кажется решением или подсказкой для этого.

Вот мой код на CodePen.

А вот мой код JavaScript: 

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


var chart = am4core.create("chartdiv", am4charts.XYChart);

chart.data = [{
        "profileName": "John",
        "slogan": "Slogan Sentence Related to Profile Name 6",
        "level": "6.",
        "income": 0,
        "bullet": "https://www.scripturaengage.com/wp-content/uploads/2017/05/Profile-Picture-Koen-VanGeert-circle-ScripturaEngage.png"

    }, {
        "profileName": "Sara",
        "slogan": "Slogan Sentence Related to Profile Name 5",
        "level": "5.",
        "income": 0,
        "bullet": "https://i1.wp.com/teacupwellness.com/wp-content/uploads/2018/03/Amanda-Blankinship-profile-circle.png?fit=300%2C300&ssl=1"
    }, {
        "profileName": "Nima",
        "slogan": "Slogan Sentence Related to Profile Name 4",
        "level": "4.",
        "income": 0,
        "bullet": "https://www.scripturaengage.com/wp-content/uploads/2017/05/Profile-Picture-Pauline-Suy-circle-ScripturaEngage.png"
    }, {
        "profileName": "Max",
        "slogan": "Slogan Sentence Related to Profile Name 3",
        "level": "3.",
        "income": 0,
        "bullet": "https://www.scripturaengage.com/wp-content/uploads/2017/05/Profile-Picture-Koen-VanGeert-circle-ScripturaEngage.png"
    }, {
        "profileName": "Megan",
        "slogan": "Slogan Sentence Related to Profile Name 2",
        "level": "2.",
        "income": 0,
        "bullet": "https://i1.wp.com/teacupwellness.com/wp-content/uploads/2018/03/Amanda-Blankinship-profile-circle.png?fit=300%2C300&ssl=1"
    }, {
        "profileName": "Inna",
        "slogan": "Slogan Sentence Related to Profile Name 1",
        "level": "1.",
        "income": 0,
        "bullet": "https://www.scripturaengage.com/wp-content/uploads/2017/05/Profile-Picture-Pauline-Suy-circle-ScripturaEngage.png"
    }  ];

// Chart A:

//create category axis for Names Column 
var categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "profileName";
categoryAxis.renderer.grid.template.location = -100;
categoryAxis.renderer.inside = true;
categoryAxis.renderer.labels.template.dy = -60;
categoryAxis.renderer.labels.template.dx = 200;
categoryAxis.labelsEnabled = false;
categoryAxis.renderer.labels.template.fontSize = 20;
categoryAxis.renderer.labels.template.fill = am4core.color("#4286f4");


//create category axis for Slogans Column 
var categoryAxis2 = chart.yAxes.push(new am4charts.CategoryAxis());
categoryAxis2.dataFields.category = "slogan";
categoryAxis2.renderer.grid.template.location = 100;
categoryAxis2.renderer.inside = true;
categoryAxis2.renderer.labels.template.dy = -20;
categoryAxis2.renderer.labels.template.dx = 200;
categoryAxis2.renderer.labels.template.fontSize = 12;

//create category level
var categoryAxis3 = chart.yAxes.push(new am4charts.CategoryAxis());
categoryAxis3.dataFields.category = "level";
categoryAxis3.renderer.grid.template.location = 100;
categoryAxis3.renderer.inside = true;
categoryAxis3.renderer.labels.template.dy = -20;
categoryAxis3.renderer.labels.template.dx = 170;
categoryAxis3.renderer.labels.template.fontSize = 16;
categoryAxis3.renderer.labels.template.fill = am4core.color("#ccd3e0");


//create value axis for income and expenses
var valueAxis = chart.xAxes.push(new am4charts.ValueAxis());
valueAxis.renderer.opposite = true;



valueAxis.min = 0;
valueAxis.max = 10;
valueAxis.strictMinMax = true;  
valueAxis.renderer.minGridDistance = 25;
valueAxis.renderer.labels.template.disabled = true;
valueAxis.disabled = true;

//create columns
var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.categoryY = "profileName";
series.dataFields.valueX = "income";
series.name = "Income";
series.columns.template.fillOpacity = 0.5;
series.columns.template.strokeOpacity = 0;


// Do not crop bullets
chart.maskBullets = false;
chart.paddingTop = 64;
chart.paddingBottom = -30;

// Add bullets
var bullet = series.bullets.push(new am4charts.Bullet());
var image = bullet.createChild(am4core.Image);
image.horizontalCenter = "middle";
image.verticalCenter = "bottom";
image.width = 120;
image.height = 120;
image.dy = 0;
image.dx = 100;
image.y = am4core.percent(100);
image.propertyFields.href = "bullet";
image.tooltipText = series.columns.template.tooltipText;
image.propertyFields.fill = "color";
image.filters.push(new am4core.DropShadowFilter());

1 Ответ

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

CategoryAxis - это, ну, ось категории.Это означает, что элементы на вашем графике сгруппированы по «категории», или profileName в вашем случае.

Если вам нужны одинаковые категории (например, две сары), они группируются в один слот, следовательнопроблема, с которой вы столкнулись.

Единственное решение - обеспечить уникальность всех категорий.Например, вы можете добавить к каждому имени суффикс "~[userid]".

, а затем добавить адаптер, который удаляет этот суффикс: 

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


var chart = am4core.create("chartdiv", am4charts.XYChart);

chart.data = [{
        "profileName": "Sara~2",
		"slogan": "Slogan Sentence Related to Profile Name 6",
		"level": "6.",
        "income": 0,
		"bullet": "https://www.scripturaengage.com/wp-content/uploads/2017/05/Profile-Picture-Koen-VanGeert-circle-ScripturaEngage.png"

    }, {
        "profileName": "Sara",
		"slogan": "Slogan Sentence Related to Profile Name 5",
		"level": "5.",
        "income": 0,
		"bullet": "https://i1.wp.com/teacupwellness.com/wp-content/uploads/2018/03/Amanda-Blankinship-profile-circle.png?fit=300%2C300&ssl=1"
    }, {
        "profileName": "Nima",
		"slogan": "Slogan Sentence Related to Profile Name 4",
		"level": "4.",
        "income": 0,
		"bullet": "https://www.scripturaengage.com/wp-content/uploads/2017/05/Profile-Picture-Pauline-Suy-circle-ScripturaEngage.png"
    }, {
        "profileName": "Max",
		"slogan": "Slogan Sentence Related to Profile Name 3",
		"level": "3.",
        "income": 0,
		"bullet": "https://www.scripturaengage.com/wp-content/uploads/2017/05/Profile-Picture-Koen-VanGeert-circle-ScripturaEngage.png"
    }, {
        "profileName": "Megan",
		"slogan": "Slogan Sentence Related to Profile Name 2",
		"level": "2.",
        "income": 0,
		"bullet": "https://i1.wp.com/teacupwellness.com/wp-content/uploads/2018/03/Amanda-Blankinship-profile-circle.png?fit=300%2C300&ssl=1"
    }, {
        "profileName": "Inna",
		"slogan": "Slogan Sentence Related to Profile Name 1",
		"level": "1.",
        "income": 0,
		"bullet": "https://www.scripturaengage.com/wp-content/uploads/2017/05/Profile-Picture-Pauline-Suy-circle-ScripturaEngage.png"
    }  ];
	
// Chart A:

//create category axis for Names Column 
var categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "profileName";
categoryAxis.renderer.grid.template.location = -100;
categoryAxis.renderer.inside = true;
categoryAxis.renderer.labels.template.dy = -60;
categoryAxis.renderer.labels.template.dx = 200;
categoryAxis.labelsEnabled = false;
categoryAxis.renderer.labels.template.fontSize = 20;
categoryAxis.renderer.labels.template.fill = am4core.color("#4286f4");
categoryAxis.renderer.labels.template.adapter.add("textOutput", stripSuffix);


//create category axis for Slogans Column 
var categoryAxis2 = chart.yAxes.push(new am4charts.CategoryAxis());
categoryAxis2.dataFields.category = "slogan";
categoryAxis2.renderer.grid.template.location = 100;
categoryAxis2.renderer.inside = true;
categoryAxis2.renderer.labels.template.dy = -20;
categoryAxis2.renderer.labels.template.dx = 200;
categoryAxis2.renderer.labels.template.fontSize = 12;
categoryAxis2.renderer.labels.template.adapter.add("textOutput", stripSuffix);

//create category level
var categoryAxis3 = chart.yAxes.push(new am4charts.CategoryAxis());
categoryAxis3.dataFields.category = "level";
categoryAxis3.renderer.grid.template.location = 100;
categoryAxis3.renderer.inside = true;
categoryAxis3.renderer.labels.template.dy = -20;
categoryAxis3.renderer.labels.template.dx = 170;
categoryAxis3.renderer.labels.template.fontSize = 16;
categoryAxis3.renderer.labels.template.fill = am4core.color("#ccd3e0");

function stripSuffix(category) {
  return category.split("~").shift();
}


//create value axis for income and expenses
var valueAxis = chart.xAxes.push(new am4charts.ValueAxis());
valueAxis.renderer.opposite = true;



valueAxis.min = 0;
valueAxis.max = 10;
valueAxis.strictMinMax = true;  
valueAxis.renderer.minGridDistance = 25;
valueAxis.renderer.labels.template.disabled = true;
valueAxis.disabled = true;

//create columns
var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.categoryY = "profileName";
series.dataFields.valueX = "income";
series.name = "Income";
series.columns.template.fillOpacity = 0.5;
series.columns.template.strokeOpacity = 0;


// Do not crop bullets
chart.maskBullets = false;
chart.paddingTop = 64;
chart.paddingBottom = -30;

// Add bullets
var bullet = series.bullets.push(new am4charts.Bullet());
var image = bullet.createChild(am4core.Image);
image.horizontalCenter = "middle";
image.verticalCenter = "bottom";
image.width = 120;
image.height = 120;
image.dy = 0;
image.dx = 100;
image.y = am4core.percent(100);
image.propertyFields.href = "bullet";
image.tooltipText = series.columns.template.tooltipText;
image.propertyFields.fill = "color";
image.filters.push(new am4core.DropShadowFilter());
#chartdiv {
  width: 1500px;
  height: 840px;
}

body {	
	margin: 40 100 100 20;
	background-color: transparent;
    overflow:hidden;
  font-family: "Helvetica Neue";
  font-weight: 800;
  src: url(helveticaneue-ultrathin.woff);	
 }
<!-- 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>

<div id="chartdiv"></div>
...