如何使用 amCharts 舍入用作项目符号的图像？
How to round an image used as bullet with amCharts?
我的 amCharts 项目中至少有两个图像项目符号，我想将其中一个名为 "bullet" 的图像四舍五入。这是 "bullet" 存在的行...
var bullet = series.bullets.push(new am4charts.Bullet());
我找到了关于舍入自定义图像的教程 here。它们在 amCharts 中用作项目符号，但它围绕每个项目符号图像，我希望它只围绕 "bullet" 忽略 "bullet2"
这是我的代码（需要全尺寸）：
// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end
// Create chart instance
var chart = am4core.create("chartdiv", am4charts.XYChart);
var myVar = {
Red: "#f72c69",
Normal: "#6887cc",
};
var userA_points = 22;
var userB_points = 20;
var userC_points = 6;
var members_points = 12;
var max_points = Math.max(userA_points, userB_points, userC_points, members_points);
var maxPlus = (max_points + 10);
maxPlus = Math.min(200, Math.max(0, maxPlus));
//console.log(maxPlus);
if (userA_points < members_points) {
var colorCompare = myVar.Red
} else {
var colorCompare = myVar.Normal
}
// Add data
chart.data = [{
"name": "Damon",
"points": userA_points,
"color": "#5479f2",
"bullet": "https://www.scripturaengage.com/wp-content/uploads/2017/05/Profile-Picture-Koen-VanGeert-circle-ScripturaEngage.png",
"bullet2": "Diamonds.png",
"gameOvers": 3
}, {
"name": "filip",
"points": userB_points,
"color": "#5479f2",
"bullet": "https://www.scripturaengage.com/wp-content/uploads/2017/05/Profile-Picture-Pauline-Suy-circle-ScripturaEngage.png",
"bullet2": "Diamonds.png",
"gameOvers": 2
}, {
"name": "Patrick",
"points": userC_points,
"color": "#5479f2",
"bullet": "https://www.scripturaengage.com/wp-content/uploads/2017/05/Profile-Picture-Pauline-Suy-circle-ScripturaEngage.png",
"bullet2": "Diamonds.png",
"gameOvers": 2
}, {
"name": "All Members",
"points": members_points,
"color": colorCompare,
"bullet": "Members.png",
"bullet2": "Diamonds.png",
"gameOvers": 2
}];
// Create axes
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "name";
categoryAxis.renderer.grid.template.disabled = true;
categoryAxis.renderer.minGridDistance = 30;
categoryAxis.renderer.inside = true;
categoryAxis.renderer.labels.template.fill = am4core.color("#fff");
categoryAxis.renderer.labels.template.fontSize = 20;
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.renderer.grid.template.strokeDasharray = "4,4";
valueAxis.renderer.labels.template.disabled = false;
valueAxis.renderer.labels.template.fontSize = 15;
valueAxis.renderer.labels.template.fontWeight = "800";
valueAxis.min = 0;
valueAxis.max = maxPlus;
valueAxis.strictMinMax = true;
valueAxis.renderer.minGridDistance = 25;
// Do not crop bullets
chart.maskBullets = false;
// Remove padding
chart.paddingBottom = 0;
chart.paddingTop = 50;
// Create series
var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.valueY = "points";
series.dataFields.categoryX = "name";
series.columns.template.propertyFields.fill = "color";
series.columns.template.propertyFields.stroke = "color";
series.columns.template.column.cornerRadiusTopLeft = 25;
series.columns.template.column.cornerRadiusTopRight = 25;
series.columns.template.tooltipHTML = "<img src='your-image.png' style='vertical-align:bottom; margin-right: 10px; width:21px; height:21px;'><span style='font-size:14px; color:#000000;'><b>POINTS {valueY.value}</b></span><br><img src='your-image.png' style='vertical-align:bottom; margin-right: 10px; width:21px; height:21px;'><span style='font-size:14px; color:#000000;'><b>Game overs: {gameOvers}</b></span><br><img src='your-image.png' style='vertical-align:bottom; margin-right: 10px; width:21px; height:21px;'><span style='font-size:14px; color:#000000;'><b>Game overs: {gameOvers}</b></span><br><img src='your-image.png' style='vertical-align:bottom; margin-right: 10px; width:21px; height:21px;'><span style='font-size:14px; color:#000000;'><b>Game overs: {gameOvers}</b></span>";
// Add bullets
var bullet = series.bullets.push(new am4charts.Bullet());
var image = bullet.createChild(am4core.Image);
image.width = 120;
image.height = 120;
image.horizontalCenter = "middle";
image.verticalCenter = "bottom";
image.dy = 70;
image.y = am4core.percent(100);
image.propertyFields.href = "bullet";
image.tooltipHTML = series.columns.template.tooltipHTML;
image.propertyFields.fill = "color";
image.filters.push(new am4core.DropShadowFilter());
// Add bullets
var bullet2 = series.bullets.push(new am4charts.Bullet());
var image = bullet2.createChild(am4core.Image);
image.width = 60;
image.height = 60;
image.horizontalCenter = "middle";
image.verticalCenter = "bottom";
image.dy = 60;
image.dx = 50;
image.y = am4core.percent(100);
image.propertyFields.href = "bullet2";
image.tooltipHTML = series.columns.template.tooltipHTML;
image.propertyFields.fill = "color";
image.filters.push(new am4core.DropShadowFilter());
#chartdiv {
width: 1500px;
height: 700px;
}
body {
margin: 130 100 100 20;
background-color: transparent;
overflow: hidden;
font-family: "Helvetica Neue";
font-weight: 800;
src: url(helveticaneue-ultrathin.woff);
}
<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>
实际上，第一个项目符号模板没有舍入或屏蔽任何内容。您使用的图像是透明的 PNG。如果您在项目符号上设置背景（例如黑色），您会看到该颜色出现在图像下方。
bullet.height = 120;
bullet.width = 120;
bullet.background.fill = am4core.color("black");
bullet.contentValign = "top";
bullet.verticalCenter = "top";
bullet.horizontalCenter = "middle";
bullet.contentAlign = "center"
至于第二组子弹(bullet2)，数据中的none个图像是我们可以test/see的，所以没办法知道是怎么回事那里。
这是一个快速演示：
https://codepen.io/team/amcharts/pen/ab60df9b6b084559ec6ae2ceaa604bf1
现在，如果您想在图像周围添加自己的剪贴蒙版，多亏了 xorspark 我已经找到了实现方法。创建一个 Circle 作为第一组项目符号的子项，然后在 Image 上为其 mask 添加一个适配器 属性，在那里你将 [=37= 】 子弹的圆圈。您必须尝试使用与对齐相关的属性才能正确定位。
例如
var mask = new am4core.Circle();
mask.radius = 40;
mask.horizontalCenter = "middle";
mask.verticalCenter = "middle";
mask.align = "center";
mask.valign = "top";
mask.parent = bullet;
image.adapter.add("mask", function(mask, target) {
return target.parent.children.getIndex(1)
});
演示（你会看到比平时少的图像显示）：
https://codepen.io/team/amcharts/pen/1ee8ad3b525c8ecb3cb0c6e88da441af
我的 amCharts 项目中至少有两个图像项目符号，我想将其中一个名为 "bullet" 的图像四舍五入。这是 "bullet" 存在的行...
var bullet = series.bullets.push(new am4charts.Bullet());
我找到了关于舍入自定义图像的教程 here。它们在 amCharts 中用作项目符号，但它围绕每个项目符号图像，我希望它只围绕 "bullet" 忽略 "bullet2"
这是我的代码（需要全尺寸）：
// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end
// Create chart instance
var chart = am4core.create("chartdiv", am4charts.XYChart);
var myVar = {
Red: "#f72c69",
Normal: "#6887cc",
};
var userA_points = 22;
var userB_points = 20;
var userC_points = 6;
var members_points = 12;
var max_points = Math.max(userA_points, userB_points, userC_points, members_points);
var maxPlus = (max_points + 10);
maxPlus = Math.min(200, Math.max(0, maxPlus));
//console.log(maxPlus);
if (userA_points < members_points) {
var colorCompare = myVar.Red
} else {
var colorCompare = myVar.Normal
}
// Add data
chart.data = [{
"name": "Damon",
"points": userA_points,
"color": "#5479f2",
"bullet": "https://www.scripturaengage.com/wp-content/uploads/2017/05/Profile-Picture-Koen-VanGeert-circle-ScripturaEngage.png",
"bullet2": "Diamonds.png",
"gameOvers": 3
}, {
"name": "filip",
"points": userB_points,
"color": "#5479f2",
"bullet": "https://www.scripturaengage.com/wp-content/uploads/2017/05/Profile-Picture-Pauline-Suy-circle-ScripturaEngage.png",
"bullet2": "Diamonds.png",
"gameOvers": 2
}, {
"name": "Patrick",
"points": userC_points,
"color": "#5479f2",
"bullet": "https://www.scripturaengage.com/wp-content/uploads/2017/05/Profile-Picture-Pauline-Suy-circle-ScripturaEngage.png",
"bullet2": "Diamonds.png",
"gameOvers": 2
}, {
"name": "All Members",
"points": members_points,
"color": colorCompare,
"bullet": "Members.png",
"bullet2": "Diamonds.png",
"gameOvers": 2
}];
// Create axes
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "name";
categoryAxis.renderer.grid.template.disabled = true;
categoryAxis.renderer.minGridDistance = 30;
categoryAxis.renderer.inside = true;
categoryAxis.renderer.labels.template.fill = am4core.color("#fff");
categoryAxis.renderer.labels.template.fontSize = 20;
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.renderer.grid.template.strokeDasharray = "4,4";
valueAxis.renderer.labels.template.disabled = false;
valueAxis.renderer.labels.template.fontSize = 15;
valueAxis.renderer.labels.template.fontWeight = "800";
valueAxis.min = 0;
valueAxis.max = maxPlus;
valueAxis.strictMinMax = true;
valueAxis.renderer.minGridDistance = 25;
// Do not crop bullets
chart.maskBullets = false;
// Remove padding
chart.paddingBottom = 0;
chart.paddingTop = 50;
// Create series
var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.valueY = "points";
series.dataFields.categoryX = "name";
series.columns.template.propertyFields.fill = "color";
series.columns.template.propertyFields.stroke = "color";
series.columns.template.column.cornerRadiusTopLeft = 25;
series.columns.template.column.cornerRadiusTopRight = 25;
series.columns.template.tooltipHTML = "<img src='your-image.png' style='vertical-align:bottom; margin-right: 10px; width:21px; height:21px;'><span style='font-size:14px; color:#000000;'><b>POINTS {valueY.value}</b></span><br><img src='your-image.png' style='vertical-align:bottom; margin-right: 10px; width:21px; height:21px;'><span style='font-size:14px; color:#000000;'><b>Game overs: {gameOvers}</b></span><br><img src='your-image.png' style='vertical-align:bottom; margin-right: 10px; width:21px; height:21px;'><span style='font-size:14px; color:#000000;'><b>Game overs: {gameOvers}</b></span><br><img src='your-image.png' style='vertical-align:bottom; margin-right: 10px; width:21px; height:21px;'><span style='font-size:14px; color:#000000;'><b>Game overs: {gameOvers}</b></span>";
// Add bullets
var bullet = series.bullets.push(new am4charts.Bullet());
var image = bullet.createChild(am4core.Image);
image.width = 120;
image.height = 120;
image.horizontalCenter = "middle";
image.verticalCenter = "bottom";
image.dy = 70;
image.y = am4core.percent(100);
image.propertyFields.href = "bullet";
image.tooltipHTML = series.columns.template.tooltipHTML;
image.propertyFields.fill = "color";
image.filters.push(new am4core.DropShadowFilter());
// Add bullets
var bullet2 = series.bullets.push(new am4charts.Bullet());
var image = bullet2.createChild(am4core.Image);
image.width = 60;
image.height = 60;
image.horizontalCenter = "middle";
image.verticalCenter = "bottom";
image.dy = 60;
image.dx = 50;
image.y = am4core.percent(100);
image.propertyFields.href = "bullet2";
image.tooltipHTML = series.columns.template.tooltipHTML;
image.propertyFields.fill = "color";
image.filters.push(new am4core.DropShadowFilter());
#chartdiv {
width: 1500px;
height: 700px;
}
body {
margin: 130 100 100 20;
background-color: transparent;
overflow: hidden;
font-family: "Helvetica Neue";
font-weight: 800;
src: url(helveticaneue-ultrathin.woff);
}
<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>
实际上，第一个项目符号模板没有舍入或屏蔽任何内容。您使用的图像是透明的 PNG。如果您在项目符号上设置背景（例如黑色），您会看到该颜色出现在图像下方。
bullet.height = 120;
bullet.width = 120;
bullet.background.fill = am4core.color("black");
bullet.contentValign = "top";
bullet.verticalCenter = "top";
bullet.horizontalCenter = "middle";
bullet.contentAlign = "center"
至于第二组子弹(bullet2)，数据中的none个图像是我们可以test/see的，所以没办法知道是怎么回事那里。
这是一个快速演示：
https://codepen.io/team/amcharts/pen/ab60df9b6b084559ec6ae2ceaa604bf1
现在，如果您想在图像周围添加自己的剪贴蒙版，多亏了 xorspark 我已经找到了实现方法。创建一个 Circle 作为第一组项目符号的子项，然后在 Image 上为其 mask 添加一个适配器 属性，在那里你将 [=37= 】 子弹的圆圈。您必须尝试使用与对齐相关的属性才能正确定位。
例如
var mask = new am4core.Circle();
mask.radius = 40;
mask.horizontalCenter = "middle";
mask.verticalCenter = "middle";
mask.align = "center";
mask.valign = "top";
mask.parent = bullet;
image.adapter.add("mask", function(mask, target) {
return target.parent.children.getIndex(1)
});
演示（你会看到比平时少的图像显示）：
https://codepen.io/team/amcharts/pen/1ee8ad3b525c8ecb3cb0c6e88da441af