如何摆脱这种amCharts失真？

Question

我想使用amCharts Javascript库显示我的用户排名。 用户排名如下（这很好，没问题）：

问题是，如果我有两个相同的个人资料名称（例如，如果我有两个萨拉名称作为个人资料名称或甚至两个类似的口号句子）这样的事情发生:(这里我改变约翰萨拉所以我们有两个萨拉）

注意：整个文本区域显示为箭头。 而且我似乎失去了其中一个Saras（现在我只能看到5个配置文件而不是6个配置文件）。

另外，我发现这个代码并且这一个在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());

Answer 1

CategoryAxis是一个类别轴。 这意味着图表中的项目按“category”或您的案例中的profileName分组。

如果您必须使用相同的类别（例如两个Saras），它们将被分组到一个插槽中，因此您遇到了问题。

唯一的解决方案是确保所有类别都是唯一的。 例如，您可以使用"~[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>