File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
import React,{ Component } from "react";
import * as am5 from "@amcharts/amcharts5";
import * as am5xy from "@amcharts/amcharts5/xy";
import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";
export default class ClusteredColumnChart extends Component {
componentDidMount() {
let root = am5.Root.new("chartdiv");
root._logo.dispose();
// Set themes
// https://www.amcharts.com/docs/v5/concepts/themes/
root.setThemes([am5themes_Animated.new(root)]);
// Create chart
// https://www.amcharts.com/docs/v5/charts/xy-chart/
let chart = root.container.children.push(
am5xy.XYChart.new(root, {
panX: false,
panY: false,
wheelX: "panX",
wheelY: "zoomX",
layout: root.verticalLayout,
})
);
// Add legend
// https://www.amcharts.com/docs/v5/charts/xy-chart/legend-xy-series/
let legend = chart.children.push(
am5.Legend.new(root, {
centerX: am5.p50,
x: am5.p50,
})
);
let data = [
{
date: "2022.12.23",
lowest: 5,
highest: 18,
},
{
date: "2022.12.24",
lowest: 18,
highest: 26,
},
{
date: "2022.12.25",
lowest: 10,
highest: 29,
},
{
date: "2022.12.26",
lowest: 18,
highest: 26,
},
{
date: "2022.12.27",
lowest: 18,
highest: 26,
},
{
date: "2022.12.28",
lowest: 18,
highest: 26,
},
{
date: "2022.12.29",
lowest: 18,
highest: 26,
},
];
// Create axes
// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
let xAxis = chart.xAxes.push(
am5xy.CategoryAxis.new(root, {
categoryField: "date",
renderer: am5xy.AxisRendererX.new(root, {
cellStartLocation: 0.1,
cellEndLocation: 0.9,
}),
tooltip: am5.Tooltip.new(root, {}),
})
);
xAxis.data.setAll(data);
let yAxis = chart.yAxes.push(
am5xy.ValueAxis.new(root, {
renderer: am5xy.AxisRendererY.new(root, {}),
})
);
// Add series
// https://www.amcharts.com/docs/v5/charts/xy-chart/series/
function makeSeries(name, fieldName) {
let series = chart.series.push(
am5xy.ColumnSeries.new(root, {
name: name,
xAxis: xAxis,
yAxis: yAxis,
valueYField: fieldName,
categoryXField: "date",
})
);
series.columns.template.setAll({
tooltipText: "{name}, {categoryX}:{valueY}",
width: am5.percent(90),
tooltipY: 0,
});
series.data.setAll(data);
// Make stuff animate on load
// https://www.amcharts.com/docs/v5/concepts/animations/
series.appear();
series.bullets.push(function () {
return am5.Bullet.new(root, {
locationY: 0,
sprite: am5.Label.new(root, {
text: "{valueY}",
fill: root.interfaceColors.get("alternativeText"),
centerY: 0,
centerX: am5.p50,
populateText: true,
}),
});
});
legend.data.push(series);
}
makeSeries("최저온도", "lowest");
makeSeries("최고온도", "highest");
// Make stuff animate on load
// https://www.amcharts.com/docs/v5/concepts/animations/
chart.appear(1000, 100);
}
componentWillUnmount() {
if (this.root) {
this.root.dispose();
}
}
render() {
return <div id="chartdiv" style={{ width: "100%", height: "22vh" }}></div>;
}
}