Amcharts 时间线修改
Amcharts timeline modifications
我想更改项目符号中的图像以使时间线变圆。
我正在尝试用 css 覆盖 css！重要和 jquery。但我无法更改子弹内的图像
看看我的codepen
https://codepen.io/levicosta201/pen/RwwQJXV
<div id="chartdiv" style="height: 500px !important;"></div>
<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/material.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>
<script src="https://www.amcharts.com/lib/4/plugins/timeline.js"></script>
<script src="https://www.amcharts.com/lib/4/plugins/bullets.js"></script>
<script>
//Chart IoTs sequence
am4core.ready(function() {
// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end
am4core.ready(function() {
var chart = am4core.create("chartdiv", am4plugins_timeline.CurveChart);
chart.curveContainer.padding(100, 20, 50, 20);
chart.maskBullets = false;
var colorSet = new am4core.ColorSet();
chart.dateFormatter.inputDateFormat = "yyyy-MM-dd HH:mm";
chart.dateFormatter.dateFormat = "HH";
const iotIcon = "data:image/png;base64,/9j/4AAQSkZJRgABAQEASABIAAD/4TIiaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/Pgo8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjMtYzAxMSA2Ni4xNDU2NjEsIDIwMTIvMDIvMDYtMTQ6NTY6MjcgICAgICAgICI+CiAgIDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+CiAgICAgIDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiCiAgICAgICAgICAgIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyI+CiAgICAgICAgIDx4bXA6Q3JlYXRvclRvb2w+QWRvYmUgRmlyZXdvcmtzIENTNiAoV2luZG93cyk8L3htcDpDcmVhdG9yVG9vbD4KICAgICAgICAgPHhtcDpDcmVhdGVEYXRlPjIwMTktMDgtMTdUMTk6NTM6MzFaPC94bXA6Q3JlYXRlRGF0ZT4KICAgICAgICAgPHhtcDpNb2RpZnlEYXRlPjIwMTktMDgtMTdUMTk6NTM6NDNaPC94bXA6TW9kaWZ5RGF0ZT4KICAgICAgPC9yZGY6RGVzY3JpcHRpb24+CiAgICAgIDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiCiAgICAgICAgICAgIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAKPD94cGFja2V0IGVuZD0idyI/Pv/bAEMABwQEBAUEBwUFBwoHBQcKDAkHBwkMDQsLDAsLDRENDQ0NDQ0RDQ8QERAPDRQUFhYUFB4dHR0eIiIiIiIiIiIiIv/bAEMBCAcHDQwNGBAQGBoVERUaICAgICAgICAgICAgICEgICAgICAhISEgICAhISEhISEhISIiIiIiIiIiIiIiIiIiIv/AABEIAMwAzAMBEQACEQEDEQH/xAAcAAEAAgMBAQEAAAAAAAAAAAAAAQIEBQYDBwj/xABGEAABAwIDAwcIBQsDBQAAAAAAAQIDBAUREjEGIUEHEyJRYXGRFDJCcoGhsdEjJDNSwRU0NUNTYnOCkrLhNsLSZJOis/D/xAAUAQEAAAAAAAAAAAAAAAAAAAAA/8QAFBEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEQMRAD8A/SIACjtQIAAAAAAAAAAAAAAAAAAAAAAAXboBIAAAAo7UCAAAAAAAFVETFdycVA09x2ws9G5WNcs8qehHp4rgBpqjlArnL9Xp42JwzKrl/ADGXbm+rxiT+X/IEt26viJv5p3bl/yBl0vKFMi/WqZFbxWNcF8N4G9tu0tpuC5IpMsq/q39FfZqigbICAAAAAAAXboBIAAAAo7UCAAAAAA86qqgpIHVE7skTExc4DhL9tRV3N6xxqsVHwYmrk63fIDUgAAAABDnNamZd2HEDe7M7dywTNpbkualdujn9JnY7s7QO4a5rmo5u9q70VOoCQAAAAAu3QCQAAABR2oEAAAACQOF2vvbq6tWkiX6pAu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";
chart.data = [{
"category": "Aiknow - Entrance",
"start": "2019-08-30 12:05",
"end": "2019-08-30 16:25",
"color": "#F60",
"icon": iotIcon,
"text": "Aiknow - Entrance"
},
{
"category": "Aiknow - Entrance",
"start": "2019-08-30 16:25",
"end": "2019-08-30 19:40",
"color": "#F00",
"icon": iotIcon,
"text": "Aiknow - Entrance"
},
{
"category": "Aiknow - Entrance",
"start": "2019-08-30 19:40",
"end": "2019-08-30 19:43",
"color": "#690310",
"icon": iotIcon,
"text": "Aiknow - Entrance"
}
];
chart.fontSize = 10;
chart.tooltipContainer.fontSize = 10;
var categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "category";
categoryAxis.renderer.grid.template.disabled = true;
categoryAxis.renderer.labels.template.paddingRight = 25;
categoryAxis.renderer.minGridDistance = 10;
categoryAxis.renderer.innerRadius = 10;
categoryAxis.renderer.radius = 30;
var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.renderer.points = getPoints();
dateAxis.renderer.autoScale = false;
dateAxis.renderer.autoCenter = false;
dateAxis.renderer.minGridDistance = 30;
dateAxis.baseInterval = { count: 1, timeUnit: "minute" };
dateAxis.renderer.tooltipLocation = 0;
dateAxis.renderer.line.strokeDasharray = "1,4";
dateAxis.renderer.line.strokeOpacity = 0.5;
dateAxis.tooltip.background.fillOpacity = 0.2;
dateAxis.tooltip.background.cornerRadius = 5;
dateAxis.tooltip.label.fill = new am4core.InterfaceColorSet().getFor("alternativeBackground");
dateAxis.tooltip.label.paddingTop = 7;
dateAxis.endLocation = 0;
dateAxis.startLocation = -0.5;
dateAxis.min = new Date(2019, 7, 29, 12, 5).getTime();
dateAxis.max = new Date(2019, 8, 1, 19, 43).getTime();
var labelTemplate = dateAxis.renderer.labels.template;
labelTemplate.verticalCenter = "middle";
labelTemplate.fillOpacity = 0.6;
labelTemplate.background.fill = new am4core.InterfaceColorSet().getFor("background");
labelTemplate.background.fillOpacity = 1;
labelTemplate.fill = new am4core.InterfaceColorSet().getFor("text");
labelTemplate.padding(7, 7, 7, 7);
var series = chart.series.push(new am4plugins_timeline.CurveColumnSeries());
series.columns.template.height = am4core.percent(30);
series.dataFields.openDateX = "start";
series.dataFields.dateX = "end";
series.dataFields.categoryY = "category";
series.baseAxis = categoryAxis;
series.columns.template.propertyFields.fill = "color"; // get color from data
series.columns.template.propertyFields.stroke = "color";
series.columns.template.strokeOpacity = 0;
series.columns.template.fillOpacity = 0.6;
var imageBullet1 = series.bullets.push(new am4plugins_bullets.PinBullet());
imageBullet1.background.radius = 18;
imageBullet1.locationX = 1;
imageBullet1.propertyFields.stroke = "color";
imageBullet1.background.propertyFields.fill = "color";
imageBullet1.image = new am4core.Image();
imageBullet1.image.propertyFields.href = "icon";
imageBullet1.image.scale = 0.7;
imageBullet1.circle.radius = 20;
imageBullet1.background.fillOpacity = 0.8;
imageBullet1.background.strokeOpacity = 0;
imageBullet1.dy = -2;
imageBullet1.background.pointerBaseWidth = 10;
imageBullet1.background.pointerLength = 10
imageBullet1.tooltipText = "{text}";
series.tooltip.pointerOrientation = "up";
imageBullet1.background.adapter.add("pointerAngle", (value, target) => {
if (target.dataItem) {
var position = dateAxis.valueToPosition(target.dataItem.openDateX.getTime());
return dateAxis.renderer.positionToAngle(position);
}
return value;
});
var hs = imageBullet1.states.create("hover")
hs.properties.scale = 1.3;
hs.properties.opacity = 1;
var textBullet = series.bullets.push(new am4charts.LabelBullet());
textBullet.label.propertyFields.text = "text";
textBullet.disabled = true;
textBullet.propertyFields.disabled = "textDisabled";
textBullet.label.strokeOpacity = 0;
textBullet.locationX = 1;
textBullet.dy = - 100;
textBullet.label.textAlign = "middle";
chart.scrollbarX = new am4core.Scrollbar();
chart.scrollbarX.align = "center"
chart.scrollbarX.width = am4core.percent(75);
chart.scrollbarX.parent = chart.curveContainer;
chart.scrollbarX.height = 300;
chart.scrollbarX.orientation = "vertical";
chart.scrollbarX.x = 128;
chart.scrollbarX.y = -140;
chart.scrollbarX.isMeasured = false;
chart.scrollbarX.opacity = 0.5;
var cursor = new am4plugins_timeline.CurveCursor();
chart.cursor = cursor;
cursor.xAxis = dateAxis;
cursor.yAxis = categoryAxis;
cursor.lineY.disabled = true;
cursor.lineX.disabled = true;
dateAxis.renderer.tooltipLocation2 = 0;
categoryAxis.cursorTooltipEnabled = false;
chart.zoomOutButton.disabled = true;
var previousBullet;
chart.events.on("inited", function() {
setTimeout(function() {
hoverItem(series.dataItems.getIndex(0));
}, 2000)
})
function hoverItem(dataItem) {
var bullet = dataItem.bullets.getKey(imageBullet1.uid);
var index = dataItem.index;
if (index >= series.dataItems.length - 1) {
index = -1;
}
if (bullet) {
if (previousBullet) {
previousBullet.isHover = false;
}
bullet.isHover = true;
previousBullet = bullet;
}
setTimeout(
function() {
hoverItem(series.dataItems.getIndex(index + 1))
}, 1000);
}
});
function getPoints() {
var points = [{ x: -1300, y: 200 }, { x: 0, y: 200 }];
var w = 400;
var h = 400;
var levelCount = 4;
var radius = am4core.math.min(w / (levelCount - 1) / 2, h / 2);
var startX = radius;
for (var i = 0; i < 25; i++) {
var angle = 0 + i / 25 * 90;
var centerPoint = { y: 200 - radius, x: 0 }
points.push({ y: centerPoint.y + radius * am4core.math.cos(angle), x: centerPoint.x + radius * am4core.math.sin(angle) });
}
for (var i = 0; i < levelCount; i++) {
if (i % 2 != 0) {
points.push({ y: -h / 2 + radius, x: startX + w / (levelCount - 1) * i })
points.push({ y: h / 2 - radius, x: startX + w / (levelCount - 1) * i })
var centerPoint = { y: h / 2 - radius, x: startX + w / (levelCount - 1) * (i + 0.5) }
if (i < levelCount - 1) {
for (var k = 0; k < 50; k++) {
var angle = -90 + k / 50 * 180;
points.push({ y: centerPoint.y + radius * am4core.math.cos(angle), x: centerPoint.x + radius * am4core.math.sin(angle) });
}
}
if (i == levelCount - 1) {
points.pop();
points.push({ y: -radius, x: startX + w / (levelCount - 1) * i })
var centerPoint = { y: -radius, x: startX + w / (levelCount - 1) * (i + 0.5) }
for (var k = 0; k < 25; k++) {
var angle = -90 + k / 25 * 90;
points.push({ y: centerPoint.y + radius * am4core.math.cos(angle), x: centerPoint.x + radius * am4core.math.sin(angle) });
}
points.push({ y: 0, x: 1300 });
}
}
else {
points.push({ y: h / 2 - radius, x: startX + w / (levelCount - 1) * i })
points.push({ y: -h / 2 + radius, x: startX + w / (levelCount - 1) * i })
var centerPoint = { y: -h / 2 + radius, x: startX + w / (levelCount - 1) * (i + 0.5) }
if (i < levelCount - 1) {
for (var k = 0; k < 50; k++) {
var angle = -90 - k / 50 * 180;
points.push({ y: centerPoint.y + radius * am4core.math.cos(angle), x: centerPoint.x + radius * am4core.math.sin(angle) });
}
}
}
}
return points;
}
}); // end am4core.ready()
</script>
你能帮我在项目符号内的图片周围应用边框半径吗？
您可以调整项目符号内 circle 和 background 对象中的 radius 属性，以用圆边遮盖图像并控制项目符号的大小。在您的情况下，将圆半径降低到 13 就足够了：
var imageBullet1 = series.bullets.push(new am4plugins_bullets.PinBullet());
// ...
imageBullet1.circle.radius = 13;
您可能会发现 bullet configuration tool from the bullet plugin tutorial 有助于理解某些属性如何影响项目符号的外观。
我想更改项目符号中的图像以使时间线变圆。 我正在尝试用 css 覆盖 css！重要和 jquery。但我无法更改子弹内的图像
看看我的codepen https://codepen.io/levicosta201/pen/RwwQJXV
<div id="chartdiv" style="height: 500px !important;"></div>
<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/material.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>
<script src="https://www.amcharts.com/lib/4/plugins/timeline.js"></script>
<script src="https://www.amcharts.com/lib/4/plugins/bullets.js"></script>
<script>
//Chart IoTs sequence
am4core.ready(function() {
// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end
am4core.ready(function() {
var chart = am4core.create("chartdiv", am4plugins_timeline.CurveChart);
chart.curveContainer.padding(100, 20, 50, 20);
chart.maskBullets = false;
var colorSet = new am4core.ColorSet();
chart.dateFormatter.inputDateFormat = "yyyy-MM-dd HH:mm";
chart.dateFormatter.dateFormat = "HH";
const iotIcon = "data:image/png;base64,/9j/4AAQSkZJRgABAQEASABIAAD/4TIiaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/Pgo8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjMtYzAxMSA2Ni4xNDU2NjEsIDIwMTIvMDIvMDYtMTQ6NTY6MjcgICAgICAgICI+CiAgIDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+CiAgICAgIDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiCiAgICAgICAgICAgIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyI+CiAgICAgICAgIDx4bXA6Q3JlYXRvclRvb2w+QWRvYmUgRmlyZXdvcmtzIENTNiAoV2luZG93cyk8L3htcDpDcmVhdG9yVG9vbD4KICAgICAgICAgPHhtcDpDcmVhdGVEYXRlPjIwMTktMDgtMTdUMTk6NTM6MzFaPC94bXA6Q3JlYXRlRGF0ZT4KICAgICAgICAgPHhtcDpNb2RpZnlEYXRlPjIwMTktMDgtMTdUMTk6NTM6NDNaPC94bXA6TW9kaWZ5RGF0ZT4KICAgICAgPC9yZGY6RGVzY3JpcHRpb24+CiAgICAgIDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiCiAgICAgICAgICAgIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAKPD94cGFja2V0IGVuZD0idyI/Pv/bAEMABwQEBAUEBwUFBwoHBQcKDAkHBwkMDQsLDAsLDRENDQ0NDQ0RDQ8QERAPDRQUFhYUFB4dHR0eIiIiIiIiIiIiIv/bAEMBCAcHDQwNGBAQGBoVERUaICAgICAgICAgICAgICEgICAgICAhISEgICAhISEhISEhISIiIiIiIiIiIiIiIiIiIv/AABEIAMwAzAMBEQACEQEDEQH/xAAcAAEAAgMBAQEAAAAAAAAAAAAAAQIEBQYDBwj/xABGEAABAwIDAwcIBQsDBQAAAAAAAQIDBAUREjEGIUEHEyJRYXGRFDJCcoGhsdEjJDNSwRU0NUNTYnOCkrLhNsLSZJOis/D/xAAUAQEAAAAAAAAAAAAAAAAAAAAA/8QAFBEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEQMRAD8A/SIACjtQIAAAAAAAAAAAAAAAAAAAAAAAXboBIAAAAo7UCAAAAAAAFVETFdycVA09x2ws9G5WNcs8qehHp4rgBpqjlArnL9Xp42JwzKrl/ADGXbm+rxiT+X/IEt26viJv5p3bl/yBl0vKFMi/WqZFbxWNcF8N4G9tu0tpuC5IpMsq/q39FfZqigbICAAAAAAAXboBIAAAAo7UCAAAAAA86qqgpIHVE7skTExc4DhL9tRV3N6xxqsVHwYmrk63fIDUgAAAABDnNamZd2HEDe7M7dywTNpbkualdujn9JnY7s7QO4a5rmo5u9q70VOoCQAAAAAu3QCQAAABR2oEAAAACQOF2vvbq6tWkiX6pAu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";
chart.data = [{
"category": "Aiknow - Entrance",
"start": "2019-08-30 12:05",
"end": "2019-08-30 16:25",
"color": "#F60",
"icon": iotIcon,
"text": "Aiknow - Entrance"
},
{
"category": "Aiknow - Entrance",
"start": "2019-08-30 16:25",
"end": "2019-08-30 19:40",
"color": "#F00",
"icon": iotIcon,
"text": "Aiknow - Entrance"
},
{
"category": "Aiknow - Entrance",
"start": "2019-08-30 19:40",
"end": "2019-08-30 19:43",
"color": "#690310",
"icon": iotIcon,
"text": "Aiknow - Entrance"
}
];
chart.fontSize = 10;
chart.tooltipContainer.fontSize = 10;
var categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "category";
categoryAxis.renderer.grid.template.disabled = true;
categoryAxis.renderer.labels.template.paddingRight = 25;
categoryAxis.renderer.minGridDistance = 10;
categoryAxis.renderer.innerRadius = 10;
categoryAxis.renderer.radius = 30;
var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.renderer.points = getPoints();
dateAxis.renderer.autoScale = false;
dateAxis.renderer.autoCenter = false;
dateAxis.renderer.minGridDistance = 30;
dateAxis.baseInterval = { count: 1, timeUnit: "minute" };
dateAxis.renderer.tooltipLocation = 0;
dateAxis.renderer.line.strokeDasharray = "1,4";
dateAxis.renderer.line.strokeOpacity = 0.5;
dateAxis.tooltip.background.fillOpacity = 0.2;
dateAxis.tooltip.background.cornerRadius = 5;
dateAxis.tooltip.label.fill = new am4core.InterfaceColorSet().getFor("alternativeBackground");
dateAxis.tooltip.label.paddingTop = 7;
dateAxis.endLocation = 0;
dateAxis.startLocation = -0.5;
dateAxis.min = new Date(2019, 7, 29, 12, 5).getTime();
dateAxis.max = new Date(2019, 8, 1, 19, 43).getTime();
var labelTemplate = dateAxis.renderer.labels.template;
labelTemplate.verticalCenter = "middle";
labelTemplate.fillOpacity = 0.6;
labelTemplate.background.fill = new am4core.InterfaceColorSet().getFor("background");
labelTemplate.background.fillOpacity = 1;
labelTemplate.fill = new am4core.InterfaceColorSet().getFor("text");
labelTemplate.padding(7, 7, 7, 7);
var series = chart.series.push(new am4plugins_timeline.CurveColumnSeries());
series.columns.template.height = am4core.percent(30);
series.dataFields.openDateX = "start";
series.dataFields.dateX = "end";
series.dataFields.categoryY = "category";
series.baseAxis = categoryAxis;
series.columns.template.propertyFields.fill = "color"; // get color from data
series.columns.template.propertyFields.stroke = "color";
series.columns.template.strokeOpacity = 0;
series.columns.template.fillOpacity = 0.6;
var imageBullet1 = series.bullets.push(new am4plugins_bullets.PinBullet());
imageBullet1.background.radius = 18;
imageBullet1.locationX = 1;
imageBullet1.propertyFields.stroke = "color";
imageBullet1.background.propertyFields.fill = "color";
imageBullet1.image = new am4core.Image();
imageBullet1.image.propertyFields.href = "icon";
imageBullet1.image.scale = 0.7;
imageBullet1.circle.radius = 20;
imageBullet1.background.fillOpacity = 0.8;
imageBullet1.background.strokeOpacity = 0;
imageBullet1.dy = -2;
imageBullet1.background.pointerBaseWidth = 10;
imageBullet1.background.pointerLength = 10
imageBullet1.tooltipText = "{text}";
series.tooltip.pointerOrientation = "up";
imageBullet1.background.adapter.add("pointerAngle", (value, target) => {
if (target.dataItem) {
var position = dateAxis.valueToPosition(target.dataItem.openDateX.getTime());
return dateAxis.renderer.positionToAngle(position);
}
return value;
});
var hs = imageBullet1.states.create("hover")
hs.properties.scale = 1.3;
hs.properties.opacity = 1;
var textBullet = series.bullets.push(new am4charts.LabelBullet());
textBullet.label.propertyFields.text = "text";
textBullet.disabled = true;
textBullet.propertyFields.disabled = "textDisabled";
textBullet.label.strokeOpacity = 0;
textBullet.locationX = 1;
textBullet.dy = - 100;
textBullet.label.textAlign = "middle";
chart.scrollbarX = new am4core.Scrollbar();
chart.scrollbarX.align = "center"
chart.scrollbarX.width = am4core.percent(75);
chart.scrollbarX.parent = chart.curveContainer;
chart.scrollbarX.height = 300;
chart.scrollbarX.orientation = "vertical";
chart.scrollbarX.x = 128;
chart.scrollbarX.y = -140;
chart.scrollbarX.isMeasured = false;
chart.scrollbarX.opacity = 0.5;
var cursor = new am4plugins_timeline.CurveCursor();
chart.cursor = cursor;
cursor.xAxis = dateAxis;
cursor.yAxis = categoryAxis;
cursor.lineY.disabled = true;
cursor.lineX.disabled = true;
dateAxis.renderer.tooltipLocation2 = 0;
categoryAxis.cursorTooltipEnabled = false;
chart.zoomOutButton.disabled = true;
var previousBullet;
chart.events.on("inited", function() {
setTimeout(function() {
hoverItem(series.dataItems.getIndex(0));
}, 2000)
})
function hoverItem(dataItem) {
var bullet = dataItem.bullets.getKey(imageBullet1.uid);
var index = dataItem.index;
if (index >= series.dataItems.length - 1) {
index = -1;
}
if (bullet) {
if (previousBullet) {
previousBullet.isHover = false;
}
bullet.isHover = true;
previousBullet = bullet;
}
setTimeout(
function() {
hoverItem(series.dataItems.getIndex(index + 1))
}, 1000);
}
});
function getPoints() {
var points = [{ x: -1300, y: 200 }, { x: 0, y: 200 }];
var w = 400;
var h = 400;
var levelCount = 4;
var radius = am4core.math.min(w / (levelCount - 1) / 2, h / 2);
var startX = radius;
for (var i = 0; i < 25; i++) {
var angle = 0 + i / 25 * 90;
var centerPoint = { y: 200 - radius, x: 0 }
points.push({ y: centerPoint.y + radius * am4core.math.cos(angle), x: centerPoint.x + radius * am4core.math.sin(angle) });
}
for (var i = 0; i < levelCount; i++) {
if (i % 2 != 0) {
points.push({ y: -h / 2 + radius, x: startX + w / (levelCount - 1) * i })
points.push({ y: h / 2 - radius, x: startX + w / (levelCount - 1) * i })
var centerPoint = { y: h / 2 - radius, x: startX + w / (levelCount - 1) * (i + 0.5) }
if (i < levelCount - 1) {
for (var k = 0; k < 50; k++) {
var angle = -90 + k / 50 * 180;
points.push({ y: centerPoint.y + radius * am4core.math.cos(angle), x: centerPoint.x + radius * am4core.math.sin(angle) });
}
}
if (i == levelCount - 1) {
points.pop();
points.push({ y: -radius, x: startX + w / (levelCount - 1) * i })
var centerPoint = { y: -radius, x: startX + w / (levelCount - 1) * (i + 0.5) }
for (var k = 0; k < 25; k++) {
var angle = -90 + k / 25 * 90;
points.push({ y: centerPoint.y + radius * am4core.math.cos(angle), x: centerPoint.x + radius * am4core.math.sin(angle) });
}
points.push({ y: 0, x: 1300 });
}
}
else {
points.push({ y: h / 2 - radius, x: startX + w / (levelCount - 1) * i })
points.push({ y: -h / 2 + radius, x: startX + w / (levelCount - 1) * i })
var centerPoint = { y: -h / 2 + radius, x: startX + w / (levelCount - 1) * (i + 0.5) }
if (i < levelCount - 1) {
for (var k = 0; k < 50; k++) {
var angle = -90 - k / 50 * 180;
points.push({ y: centerPoint.y + radius * am4core.math.cos(angle), x: centerPoint.x + radius * am4core.math.sin(angle) });
}
}
}
}
return points;
}
}); // end am4core.ready()
</script>
你能帮我在项目符号内的图片周围应用边框半径吗？
您可以调整项目符号内 circle 和 background 对象中的 radius 属性，以用圆边遮盖图像并控制项目符号的大小。在您的情况下，将圆半径降低到 13 就足够了：
var imageBullet1 = series.bullets.push(new am4plugins_bullets.PinBullet());
// ...
imageBullet1.circle.radius = 13;
您可能会发现 bullet configuration tool from the bullet plugin tutorial 有助于理解某些属性如何影响项目符号的外观。