javascript - 如何放大 amCharts 系列的第一个项目符号？

Question

这是我要修改的图表:

如您所见，它是一个折线图，图像覆盖在每个系列的第一个项目符号上(用户图像!)。

现在我想在每个图像周围画一个圆圈，颜色与每个系列的线条相同。

像这样:

我认为，如果我们能够扩大每个系列的第一个项目符号，我们就能实现该目标。

此处是代码创建项目符号及其属性的地方，但此处的更改将影响 userA_series 中的所有项目符号:

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;

完整代码如下:

// 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);   
 }

Answer 1

您可以使用 Adapter为了那个原因。只需在子弹圆的 radius 属性中添加一个适配器即可:

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

在某些情况下，您应该更改 image.dy 属性以使图像在圆形项目符号中居中:

image.dy = 50;

我创建了 this code pen作为引用。但是我只为第一个系列添加了适配器，你必须为其他系列自己做