Berikut adalah bagan yang ingin saya modifikasi:

enter image description here

Seperti yang Anda lihat, itu adalah bagan garis dan gambar di atas poin pertama dari setiap seri (Gambar Pengguna!).

Sekarang Saya ingin sebuah lingkaran mengelilingi setiap Gambar dengan warna yang sama dengan garis setiap rangkaian.

Sesuatu seperti ini:

masukkan deskripsi gambar di sini

Dan Berikut adalah seluruh kode:

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

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

// Import data from server

var inGroup = true;


var repeats = ["Start", "Day", "Week", "Month", "3th Month", "Year", "7th", "8th", "9th", "10th"];

var userA_Diamonds = ["7", "12", "18", "24", "20", "16", "19", "25", "29", "32"];
var userA_Performance = ["94", "29", "40", "65", "88", "89", "90", "75", "80", "89"];
var userA_GameOvers = ["8", "4", "4", "3", "5", "2", "1", "0", "0", "1"];
var userA_Rank = ["115", "114", "100", "98", "87", "55", "12", "45", "65", "18"];

userA_Performance.length = 3;

var userB_Performance = ["62", "55", "78", "84", "89", "87", "95", "74", "112", "115", "114"];
userB_Performance.length = 2;

var userC_Performance = ["25", "36", "42", "51", "49", "61", "68", "75", "90", "100", "112"];
userC_Performance.length = 1;

var userD_Performance = ["45", "49", "68", "64", "89", "110", "87", "46", "89", "64", "89"];
userD_Performance.length = 1;




// Add data
chart.data = [{
  "repeat": "1th",
}, {
  "repeat": repeats[0],
  "DiamondsA": userA_Diamonds[0],
  "PerformanceA": userA_Performance[0],
  "GameOversA": userA_GameOvers[0],
  "RankA": userA_Rank[0],
  "PerformanceB": userB_Performance[0],
  "PerformanceC": userC_Performance[0],
  "PerformanceD": userD_Performance[0],
  "bulletD": "https://i1.wp.com/teacupwellness.com/wp-content/uploads/2018/03/Amanda-Blankinship-profile-circle.png?fit=300%2C300&ssl=1",
  "bulletC": "https://www.scripturaengage.com/wp-content/uploads/2017/03/Profile-Picture-Gert-Cools-Circle.png",
  "bulletB": "https://www.cpisandiego.org/wp-content/uploads/2018/07/Andrea-profile-pic_circle-300x300.png",
  "bulletA": "https://www.scripturaengage.com/wp-content/uploads/2017/05/Profile-Picture-Koen-VanGeert-circle-ScripturaEngage.png",

}, {
  "repeat": repeats[1],
  "DiamondsA": userA_Diamonds[1],
  "PerformanceA": userA_Performance[1],
  "GameOversA": userA_GameOvers[1],
  "RankA": userA_Rank[1],
  "PerformanceB": userB_Performance[1],
  "PerformanceC": userC_Performance[1],
  "PerformanceD": userD_Performance[1],
}, {
  "repeat": repeats[2],
  "DiamondsA": userA_Diamonds[2],
  "PerformanceA": userA_Performance[2],
  "GameOversA": userA_GameOvers[2],
  "RankA": userA_Rank[2],
  "PerformanceB": userB_Performance[2],
  "PerformanceC": userC_Performance[2],
  "PerformanceD": userD_Performance[2],
}, {
  "repeat": repeats[3],
  "DiamondsA": userA_Diamonds[3],
  "PerformanceA": userA_Performance[3],
  "GameOversA": userA_GameOvers[3],
  "RankA": userA_Rank[3],
  "PerformanceB": userB_Performance[3],
  "PerformanceC": userC_Performance[3],
  "PerformanceD": userD_Performance[3],
}, {
  "repeat": repeats[4],
  "DiamondsA": userA_Diamonds[4],
  "PerformanceA": userA_Performance[4],
  "GameOversA": userA_GameOvers[4],
  "RankA": userA_Rank[4],
  "PerformanceB": userB_Performance[4],
  "PerformanceC": userC_Performance[4],
  "PerformanceD": userD_Performance[4],
}, {
  "repeat": repeats[5],
  "DiamondsA": userA_Diamonds[5],
  "PerformanceA": userA_Performance[5],
  "GameOversA": userA_GameOvers[5],
  "RankA": userA_Rank[5],
  "PerformanceB": userB_Performance[5],
  "PerformanceC": userC_Performance[5],
  "PerformanceD": userD_Performance[5],
}, {
  "repeat": repeats[6],
  "DiamondsA": userA_Diamonds[6],
  "PerformanceA": userA_Performance[6],
  "GameOversA": userA_GameOvers[6],
  "RankA": userA_Rank[6],
  "PerformanceB": userB_Performance[6],
  "PerformanceC": userC_Performance[6],
  "PerformanceD": userD_Performance[6],
}, {
  "repeat": repeats[7],
  "DiamondsA": userA_Diamonds[7],
  "PerformanceA": userA_Performance[7],
  "GameOversA": userA_GameOvers[7],
  "RankA": userA_Rank[7],
  "PerformanceB": userB_Performance[7],
  "PerformanceC": userC_Performance[7],
  "PerformanceD": userD_Performance[7],
}, {
  "repeat": repeats[8],
  "DiamondsA": userA_Diamonds[8],
  "PerformanceA": userA_Performance[8],
  "GameOversA": userA_GameOvers[8],
  "RankA": userA_Rank[8],
  "PerformanceB": userB_Performance[8],
  "PerformanceC": userC_Performance[8],
  "PerformanceD": userD_Performance[8],
}, {
  "repeat": repeats[9],
  "DiamondsA": userA_Diamonds[9],
  "PerformanceA": userA_Performance[9],
  "GameOversA": userA_GameOvers[9],
  "RankA": userA_Rank[9],
  "PerformanceB": userB_Performance[9],
  "PerformanceC": userC_Performance[9],
  "PerformanceD": userD_Performance[9],
}, {
  "repeat": "2019",
}  ];


if(userA_Performance.length < 7){
    splicer(8, 4); 
} else{

};

    function splicer(a, b) {
          chart.data.splice( a, b );             
    }


// Create axes
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "repeat";
categoryAxis.renderer.grid.template.disabled = false;
categoryAxis.renderer.minGridDistance = 30;
categoryAxis.startLocation = 0.5;
categoryAxis.endLocation = 0.5;
categoryAxis.renderer.minLabelPosition = 0.05;
categoryAxis.renderer.maxLabelPosition = 0.95;
categoryAxis.renderer.grid.template.strokeDasharray = "4,4";


var categoryAxisTooltip = categoryAxis.tooltip.background;
categoryAxisTooltip.pointerLength = 0;
categoryAxisTooltip.fillOpacity = 0.9;
categoryAxisTooltip.filters.push(new am4core.BlurFilter).blur = 5;
categoryAxis.tooltip.dy = 5;



var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.renderer.inside = true;
valueAxis.renderer.grid.template.disabled = false;
valueAxis.renderer.minLabelPosition = 0.05;
valueAxis.renderer.maxLabelPosition = 0.95;
valueAxis.renderer.grid.template.strokeDasharray = "4,4";

// Create Colored Range

var range = valueAxis.axisRanges.create();
range.value = 100;
range.endValue = 200;
range.axisFill.fill = am4core.color("#46f727");
range.axisFill.fillOpacity = 0.01;

// Create Colored Line

var range = valueAxis.axisRanges.create();
range.value = 100;
range.grid.stroke = am4core.color("#f72727");
range.grid.strokeWidth = 2;
range.grid.strokeOpacity = 0.1;


//var valueAxisTooltip = valueAxis.tooltip.background;
//valueAxisTooltip.pointerLength = 0;
//valueAxisTooltip.fillOpacity = 0.8;
//valueAxisTooltip.filters.push(new am4core.BlurFilter).blur = 5;
valueAxis.cursorTooltipEnabled = false;

// Do not crop bullets
chart.maskBullets = false;
// Remove padding
chart.paddingBottom = 35;
chart.paddingTop = 50;

// Create userD_series: light Blue

var userD_series = chart.series.push(new am4charts.LineSeries());
userD_series.dataFields.categoryX = "repeat";
userD_series.dataFields.valueY = "PerformanceD";
userD_series.stroke = am4core.color("#5394fc");
userD_series.strokeWidth = 2;
userD_series.strokeDasharray = "3,3";
userD_series.tooltipText = "[bold #6b12e4 font-size: 14]{valueY}%[/]";
userD_series.tooltip.pointerOrientation = "vertical";
userD_series.tooltip.label.textAlign = "middle";

userD_series.tooltip.label.background.fill = am4core.color("#fcf9f9");
userD_series.tooltip.background.strokeWidth = 10;
userD_series.tooltip.background.cornerRadius = 3;
userD_series.tooltip.disabled = true;

var bullet = userD_series.bullets.push(new am4charts.CircleBullet())
bullet.circle.radius = 8;
bullet.fill = am4core.color("#5394fc");
bullet.stroke = am4core.color("#5394fc");
bullet.strokeWidth = 3;



var shadow1 = new am4core.DropShadowFilter();
userD_series.filters.push(shadow1);

// Create userC_series: Dark Blue

var userC_series = chart.series.push(new am4charts.LineSeries());
userC_series.dataFields.categoryX = "repeat";
userC_series.dataFields.valueY = "PerformanceC";
userC_series.stroke = am4core.color("#0027d8");
userC_series.strokeWidth = 2;
userC_series.strokeDasharray = "3,3";
userC_series.tooltipText = "[bold #6b12e4 font-size: 14]{valueY}%[/]";
userC_series.tooltip.pointerOrientation = "vertical";
userC_series.tooltip.label.textAlign = "middle";

userC_series.tooltip.label.background.fill = am4core.color("#fcf9f9");
userC_series.tooltip.background.strokeWidth = 10;
userC_series.tooltip.background.cornerRadius = 3;
userC_series.tooltip.disabled = true;

var bullet = userC_series.bullets.push(new am4charts.CircleBullet())
bullet.circle.radius = 8;
bullet.fill = am4core.color("#0400ff");
bullet.stroke = am4core.color("#0400ff");
bullet.strokeWidth = 3;



var shadow1 = new am4core.DropShadowFilter();
userC_series.filters.push(shadow1);


// Create userB_series: Blue

var userB_series = chart.series.push(new am4charts.LineSeries());
userB_series.dataFields.categoryX = "repeat";
userB_series.dataFields.valueY = "PerformanceB";
userB_series.stroke = am4core.color("#732ec9");
userB_series.strokeWidth = 2;
userB_series.strokeDasharray = "3,3";
userB_series.tooltipText = "[bold #002aff font-size: 14]{valueY}%[/]";
userB_series.tooltip.pointerOrientation = "vertical";
userB_series.tooltip.label.textAlign = "middle";

userB_series.tooltip.label.background.fill = am4core.color("#fcf9f9");
userB_series.tooltip.background.strokeWidth = 10;
userB_series.tooltip.background.cornerRadius = 3;
userB_series.tooltip.disabled = true;

var bullet = userB_series.bullets.push(new am4charts.CircleBullet())
bullet.circle.radius = 8;
bullet.fill = am4core.color("#6a1ec9");
bullet.stroke = am4core.color("#6a1ec9");
bullet.strokeWidth = 3;



var shadow2 = new am4core.DropShadowFilter();
userB_series.filters.push(shadow2);

chart.cursor = new am4charts.XYCursor();
chart.cursor.lineX.disabled = true;
chart.cursor.lineY.disabled = true;



// Create userA_series: Red

var userA_series = chart.series.push(new am4charts.LineSeries());
userA_series.dataFields.categoryX = "repeat";
userA_series.dataFields.valueY = "PerformanceA";
userA_series.stroke = am4core.color("#ff0037");
userA_series.strokeWidth = 4;
userA_series.strokeDasharray = "12,3";
//userA_series.tooltipText = "[bold #ff0037 font-size: 14]{valueY}%[/]";
//userA_series.tooltip.pointerOrientation = "vertical";
//userA_series.tooltip.label.textAlign = "middle";


userA_series.tooltipHTML = "<img src='Images/Diamonds.png' style='vertical-align:middle; margin-right: 14px; width:38px; height:34px;'><span style='font-size:14px; color:#448afc;'><b>Diamonds: {DiamondsA}</b></span><br><img src='Images/Performance.png' style='vertical-align:middle; margin-right: 10px; width:42px; height:40px;'><span style='font-size:14px; color:#000000;'><b>Performance: {PerformanceA}</b></span><br><img src='Images/Game-Overs.png' style='vertical-align:middle; margin-right: 20px; width:32px; height:30px;'><span style='font-size:14px; color:#000000;'><b>Game Overs: {GameOversA}</b></span><br><img src='Images/Rank.png' style='vertical-align:middle; margin-right: 10px; width:43px; height:41px;'><span style='font-size:14px; color:#000000;'><b>Rank: {RankA}</b></span>";


userA_series.tooltip.label.background.fill = am4core.color("#f7f7f7");
userA_series.tooltip.background.strokeWidth = 10;
userA_series.tooltip.background.cornerRadius = 3;

var bullet = userA_series.bullets.push(new am4charts.CircleBullet())
bullet.circle.radius = 8;
bullet.fill = am4core.color("#ff0037");
bullet.stroke = am4core.color("#ff0037");
bullet.strokeWidth = 20;

var bullet3hover = bullet.states.create("hover");
bullet3hover.properties.scale = 1.4;

var shadow1 = new am4core.DropShadowFilter();
userA_series.filters.push(shadow1);


// Add bullets 1
var bullet = userA_series.bullets.push(new am4charts.Bullet());
var image = bullet.createChild(am4core.Image);
image.width = 100;
image.height = 100;
image.horizontalCenter = "middle";
image.verticalCenter = "bottom";
image.dy = 45;
image.y = am4core.percent(100);
image.propertyFields.href = "bulletA";
image.propertyFields.fill = "color";
image.filters.push(new am4core.DropShadowFilter());

// Add bullets 2
var bullet = userB_series.bullets.push(new am4charts.Bullet());
var image = bullet.createChild(am4core.Image);
image.width = 50;
image.height = 50;
image.horizontalCenter = "middle";
image.verticalCenter = "bottom";
image.dy = 20;
image.y = am4core.percent(100);
image.propertyFields.href = "bulletB";
image.propertyFields.fill = "color";
image.filters.push(new am4core.DropShadowFilter());

// Add bullets 3
var bullet = userC_series.bullets.push(new am4charts.Bullet());
var image = bullet.createChild(am4core.Image);
image.width = 50;
image.height = 50;
image.horizontalCenter = "middle";
image.verticalCenter = "bottom";
image.dy = 20;
image.y = am4core.percent(100);
image.propertyFields.href = "bulletC";
image.propertyFields.fill = "color";
image.filters.push(new am4core.DropShadowFilter());

// Add bullets 4
var bullet = userD_series.bullets.push(new am4charts.Bullet());
var image = bullet.createChild(am4core.Image);
image.width = 50;
image.height = 50;
image.horizontalCenter = "middle";
image.verticalCenter = "bottom";
image.dy = 20;
image.y = am4core.percent(100);
image.propertyFields.href = "bulletD";
image.propertyFields.fill = "color";
image.filters.push(new am4core.DropShadowFilter());

HTML

<!-- Resources -->
<script language="JavaScript" src="amcharts4/core.js"></script>
<script language="JavaScript" src="amcharts4/charts.js"></script>
<script language="JavaScript" src="amcharts4/themes/animated.js"></script>

<div id="chartdiv"></div>
  <link rel="stylesheet" href="Style.css">
  <script src="Script.js"></script>

CSS

#chartdiv {
  width: 1500px;
  height: 700px;
}

body {  
    margin: 160 100 100 20;
    background-color: transparent;
    overflow:hidden;
  font-family: "Helvetica Neue";
  font-weight: 800;
  src: url(helveticaneue-ultrathin.woff);   
 }
2
Sara Ree 15 Maret 2019, 12:42

1 menjawab

Jawaban Terbaik

Anda dapat menggunakan Adaptor untuk itu. Cukup tambahkan adaptor ke properti radius dari lingkaran peluru:

bullet.circle.radius = 8;
bullet.circle.adapter.add("radius", (radius, target, key) => {
  if (target.dataItem.dataContext.repeat === 'Start') {
    return 50;
  }
  return radius;
});

Dalam beberapa kasus, Anda harus mengubah properti image.dy untuk memusatkan gambar di peluru lingkaran:

image.dy = 50;

Saya membuat pen kode ini sebagai referensi. Tapi saya menambahkan adaptor hanya untuk seri pertama, Anda harus melakukannya sendiri untuk yang lain

2
Samuel Philipp 15 Maret 2019, 11:09