如何扩大amCharts系列的第一个项目符号？
这是我要修改的图表：
如您所见，它是一个折线图，并且图像覆盖在每个系列的第一个项目符号上（用户图像！）。
现在我想在每个图像周围画一个圆圈，其颜色与每个系列的线条相同。
类似这样的东西：
我认为，如果我们能够扩大每个系列的第一个项目符号，我们将存档该目标。
此处是代码创建项目符号及其属性的地方，但是此处的更改将影响 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);
}
1 个答案:
答案 0 :(得分：2)
您可以为此使用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作为参考。但是我只为第一个系列添加了适配器，您必须自己为其他系列添加适配器
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？