<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>和絃圖</title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div id="chartdiv"></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/animated.js"></script>
<script>
am4core.useTheme(am4themes_animated);
var chart = am4core.create("chartdiv", am4charts.XYChart);
chart.paddingBottom = 30;
chart.data = [{
"name": "Monica",
"steps": 45688
}, {
"name": "Joey",
"steps": 35781
}, {
"name": "Ross",
"steps": 25464
}, {
"name": "Phoebe",
"steps": 18788
}, {
"name": "Rachel",
"steps": 15465
}, {
"name": "Chandler",
"steps": 11561
}];
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "name";
categoryAxis.renderer.grid.template.strokeOpacity = 0;
categoryAxis.renderer.minGridDistance = 10;
categoryAxis.renderer.labels.template.dy = 35;
categoryAxis.renderer.tooltip.dy = 35;
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.renderer.inside = true;
valueAxis.renderer.labels.template.fillOpacity = 0.3;
valueAxis.renderer.grid.template.strokeOpacity = 0;
valueAxis.min = 0;
valueAxis.cursorTooltipEnabled = false;
valueAxis.renderer.baseGrid.strokeOpacity = 0;
var series = chart.series.push(new am4charts.ColumnSeries);
series.dataFields.valueY = "steps";
series.dataFields.categoryX = "name";
series.tooltipText = "{valueY.value}";
series.tooltip.pointerOrientation = "vertical";
series.tooltip.dy = - 6;
series.columnsContainer.zIndex = 100;
var columnTemplate = series.columns.template;
columnTemplate.width = am4core.percent(50);
columnTemplate.maxWidth = 66;
columnTemplate.column.cornerRadius(60, 60, 10, 10);
columnTemplate.strokeOpacity = 0;
series.heatRules.push({ target: columnTemplate, property: "fill", dataField: "valueY", min: am4core.color("#e5dc36"), max: am4core.color("#5faa46") });
series.mainContainer.mask = undefined;
var cursor = new am4charts.XYCursor();
chart.cursor = cursor;
cursor.lineX.disabled = true;
cursor.lineY.disabled = true;
cursor.behavior = "none";
var bullet = columnTemplate.createChild(am4charts.CircleBullet);
bullet.circle.radius = 30;
bullet.valign = "bottom";
bullet.align = "center";
bullet.isMeasured = true;
bullet.interactionsEnabled = false;
bullet.verticalCenter = "bottom";
var hoverState = bullet.states.create("hover");
var outlineCircle = bullet.createChild(am4core.Circle);
outlineCircle.adapter.add("radius", function (radius, target) {
var circleBullet = target.parent;
return circleBullet.circle.pixelRadius + 10;
})
var image = bullet.createChild(am4core.Image);
image.width = 60;
image.height = 60;
image.horizontalCenter = "middle";
image.verticalCenter = "middle";
image.adapter.add("href", function (href, target) {
var dataItem = target.dataItem;
if (dataItem) {
return dataItem.categoryX.toLowerCase() + ".jpg";
}
})
image.adapter.add("mask", function (mask, target) {
var circleBullet = target.parent;
return circleBullet.circle;
})
var previousBullet;
chart.cursor.events.on("cursorpositionchanged", function (event) {
var dataItem = series.tooltipDataItem;
if (dataItem.column) {
var bullet = dataItem.column.children.getIndex(1);
if (previousBullet && previousBullet != bullet) {
previousBullet.isHover = false;
}
if (previousBullet != bullet) {
var hs = bullet.states.getKey("hover");
hs.properties.dy = -bullet.parent.pixelHeight + 30;
bullet.isHover = true;
previousBullet = bullet;
}
}
})
</script>
</body>
</html>
![]()
Amchart全部示例 github地址 別忘了點個小星星
