Flexmonster Pivot 및 amCharts가 포함된 멋진 대시보드
14039 단어 javascriptdatascience
이번에도 일어났습니다. amCharts에 있는 모든 예를 보았을 때 가까운 장래에 내가 어떻게 지출할지 즉시 알았습니다. 이것이 바로 차트와 피벗을 결합하고 멋진 대화형 대시보드를 만드는 동시에 의미 있는 대시보드를 만드는 방법에 대한 이 미니 튜토리얼이 등장한 방식입니다.
그래서 일하러 가자!
1단계. 데이터
데이터부터 시작하겠습니다. 이번에는 프랑스, 그리스, 이탈리아에서 치즈 생산에 대한 정보를 얻기로 했습니다. 그것들은 내 JSON 배열에 있으며 코드에 직접 삽입하고 getData() 함수를 통해 피벗에 대한 데이터를 가져옵니다.
function getData() {
return [
{
Date: "2020-01-05",
id: "GR",
CountryCode: "gr",
Country: "Greece",
Feta: 62,
Mozzarella: 8,
"Parmigiano-Reggiano": 8
},
{
Date: "2020-01-12",
id: "GR",
CountryCode: "gr",
Country: "Greece",
Feta: 62,
Mozzarella: 11,
"Parmigiano-Reggiano": 8
},
…
] }
2단계. 피벗
이제 피벗 자체를 생성하고 마지막에 대시보드용 차트를 생성하는 reportcompleteevent 핸들러를 추가해 보겠습니다.
let pivot = new Flexmonster({
container: "pivot-container",
licenseFilePath: "https://cdn.flexmonster.com/codepen.key",
componentFolder: "https://cdn.flexmonster.com/",
height: 440,
customizeCell: customizeCell,
report: {
dataSource: {
data: getData(),
mapping: {
Date: {
type: "date"
},
Country: {
type: "string"
},
id: {
type: "string"
},
CountryCode: {
type: "property",
hierarchy: "Country"
},
Feta: {
type: "number"
},
Mozzarella: {
type: "number"
},
"Parmigiano-Reggiano": {
type: "number"
}
}
},
slice: {
rows: [
{
uniqueName: "Country"
},
{
uniqueName: "[Measures]"
}
],
columns: [
{
uniqueName: "Date.Month",
filter: {
members: [
"date.month.[january]",
"date.month.[february]",
"date.month.[march]",
"date.month.[april]",
"date.month.[may]",
"date.month.[june]"
]
}
}
],
measures: [
{
uniqueName: "Feta",
aggregation: "sum",
grandTotalCaption: "Feta"
},
{
uniqueName: "Mozzarella",
aggregation: "sum",
grandTotalCaption: "Mozzarella"
},
{
uniqueName: "Parmigiano-Reggiano",
aggregation: "sum",
grandTotalCaption: "Parmigiano-Reggiano"
}
]
},
options: {
grid: {
showHeaders: false,
showGrandTotals: "rows"
},
showAggregationLabels: false
}
},
reportcomplete: function () {
pivot.off("reportcomplete");
createPieChart();
createStackedChart();
createMapChart();
createPictorialChart();
}
});
3단계. 커스터마이징
피벗 자체를 더 흥미롭게 만들기 위해 국가에 국기를 추가하는 것이 좋습니다. customizeCell 함수를 통해 이 작업을 수행하고 CSS를 통해 스타일을 설정합니다. 펼쳐진 변형과 접힌 변형 모두에 스타일을 지정하고 있습니다.
function customizeCell(cell, data) {
if (data.hierarchy && data.type == "header") {
console.log(data);
if (
data.hierarchy.caption == "Country" &&
data.member &&
data.member.properties
) {
let name = data.member.properties.CountryCode;
let flag = `<i class="fm-icon ${
data.expanded ? "fm-expanded-icon" : "fm-collapsed-icon"
}"
title="${data.expanded ? "Click to collapse" : "Click to expand"}"></i>
<img class="flag-icon" src="https://cdn.flexmonster.com/i/flags/${name.toLowerCase()}.svg">`;
cell.text = `${flag}<span style="margin-left: 2px; line-height: 16px">${data.member.caption}</span>`;
cell.addClass("fm-custom-cell");
}
}
}
CSS
.fm-custom-cell {
display: flex !important;
align-items: center !important;
font-size: 12px !important;
}
.fm-custom-cell .flag-icon {
width: 21px !important;
height: 16px !important;
margin-left: 0 !important;
margin-right: 2px !important;
}
#fm-pivot-view
.fm-grid-layout
.fm-custom-cell.fm-expanded
.fm-expanded-icon::before,
#fm-pivot-view
.fm-grid-layout
.fm-custom-cell.fm-collapsed
.fm-collapsed-icon::before {
top: -2px;
height: 16px;
}
4단계. 차트
이제 차트에 도달할 수 있습니다.
먼저 차트를 선언하고 차트에서 사용할 색상을 선택합니다.
let mapChart, pieChart, stackedChart, pictorialChart;
// Apply amCharts theme
am4core.useTheme(am4themes_animated);
const chartColors = [
am4core.color("#4CBF8B"),
am4core.color("#FFCD4C"),
am4core.color("#E8734C"),
am4core.color("#9875E3"),
am4core.color("#4C9EFF"),
am4core.color("#8ACFC3"),
am4core.color("#CD97E6"),
am4core.color("#F1D34C"),
am4core.color("#65D2E7")
];
const cheeseColors = [
am4core.color("#FFE268"),
am4core.color("#FFCD4C"),
am4core.color("#FFB037")
];
차트의 데이터는 특별한 getData API 호출을 통해 피벗에서 전송됩니다. 여기처럼:
function createPieChart() {
pivot.amcharts.getData(
{
slice: {
rows: [
{
uniqueName: "Date.Month",
filter: {
members: [
"date.month.[january]",
"date.month.[february]",
"date.month.[march]",
"date.month.[april]",
"date.month.[may]",
"date.month.[june]"
]
}
}
],
measures: [
{
uniqueName: "Feta",
aggregation: "sum"
}
]
}
},
drawPieChart,
updatePieChart
);
}
amCharts 데모 페이지에서 다양한 차트와 그래픽을 찾아 프로젝트에 적용할 수 있습니다. 이 대시보드에서는 StackedChart, PieChart, MapChart 및 PictorialChart를 선택했습니다.
이 기사에서는 PictorialChart를 사용하여 피벗에서 데이터를 전송하는 방법을 보여주고 나머지 차트에서는 모든 것이 동일한 방식으로 작동합니다. demo의 소스 코드에서 더 자세히 공부할 수 있습니다.
따라서 먼저 차트를 초기화한 다음 데이터를 추가합니다.
pictorialChart = am4core.create(
"amcharts-pictorial-container",
am4charts.SlicedChart
);
pictorialChart.data = chartData.data;
이것이 끝을 보는 방법입니다.
function drawPictorialChart(chartData, rawData) {
var iconPath =
"M10.512,156.385l231.164,35.647c-1.779-3.578-2.869-7.554-2.869-11.817c0-14.766,11.962-26.728,26.733-26.728 c14.768,0,26.733,11.962,26.733,26.728c0,7.173-2.861,13.657-7.466,18.466l75.392,11.622c8.752,1.351,12.632-3.979,8.66-11.906 l-35.401-70.833c-4.172,2.687-9.125,4.29-14.459,4.29c-14.768,0-26.726-11.968-26.726-26.733c0-11.491,7.29-21.213,17.473-24.98l-17.429-34.825c-3.955-7.92-13.781-11.547-21.94-8.093L232.122,53.41c5.122,7.019,8.175,15.631,8.175,24.98c0,23.463-19.015,42.477-42.49,42.477c-20.977,0-38.365-15.222-41.804-35.223L9.43,147.683C1.28,151.141,1.759,155.032,10.512,156.385z M125.661,123.215c4.883,0,8.838,3.95,8.838,8.833c0,4.883-3.955,8.833-8.838,8.833c-4.873,0-8.833-3.949-8.833-8.833C116.829,127.165,120.788,123.215,125.661,123.215zM30.294,218.466c17.012,0,30.799,13.793,30.799,30.805c0,16.996-13.788,30.797-30.799,30.797c-6.444,0-12.419-1.987-17.364-5.374l3.048,26.361c1.02,8.812,9.011,16.362,17.859,16.875l189.024,11.157c-0.068-0.754-0.229-1.476-0.229-2.24c0-14.644,11.857-26.497,26.493-26.497c14.643,0,26.497,11.854,26.497,26.497c0,1.815-0.192,3.595-0.529,5.313l59.086,3.486c8.844,0.514,17.34-6.115,18.979-14.827l18.431-98.29L0,162.851l7.598,65.657C13.229,222.353,21.297,218.466,30.294,218.466z M135.451,219.127c10.283,0,18.612,8.331,18.612,18.622c0,10.287-8.337,18.619-18.612,18.619c-10.293,0-18.623-8.332-18.623-18.619C116.829,227.458,125.158,219.127,135.451,219.127zM98.206,271.243c4.885,0,8.844,3.947,8.844,8.829c0,4.885-3.959,8.832-8.844,8.832c-4.871,0-8.831-3.947-8.831-8.832C89.375,275.19,93.335,271.243,98.206,271.243z";
pictorialChart = am4core.create(
"amcharts-pictorial-container",
am4charts.SlicedChart
);
pictorialChart.hiddenState.properties.opacity = 0; // this makes initial fade in effect
pictorialChart.data = chartData.data;
var series = pictorialChart.series.push(
new am4charts.PictorialStackedSeries()
);
series.colors.list = cheeseColors;
series.dataFields.value = pivot.amcharts.getMeasureNameByIndex(rawData, 0);
series.dataFields.category = pivot.amcharts.getCategoryName(rawData);
series.alignLabels = true;
series.labels = "disabled";
series.ticks = "disabled";
series.maskSprite.path = iconPath;
pictorialChart.legend = new am4charts.Legend();
pictorialChart.legend.position = "right";
let marker = pictorialChart.legend.markers.template.children.getIndex(0);
pictorialChart.legend.markers.template.width = 20;
pictorialChart.legend.markers.template.height = 20;
marker.cornerRadius(20, 20, 20, 20);
pictorialChart.responsive.enabled = true;
pictorialChart.responsive.rules.push({
relevant: function (target) {
if (target.pixelWidth <= 600) {
return true;
}
return false;
},
state: function (target, stateId) {
if (target instanceof am4charts.PictorialStackedSeries) {
var state = target.states.create(stateId);
var labelState = target.labels.template.states.create(stateId);
labelState.properties.disabled = true;
var tickState = target.ticks.template.states.create(stateId);
tickState.properties.disabled = true;
return state;
}
return null;
}
});
}
또한 피벗 데이터의 변경 사항에 따라 차트가 대화식으로 유지되고 변환되도록 차트를 업데이트하는 것을 잊지 않습니다.
function updatePictorialChart(chartData, rawData) {
pictorialChart.dispose();
drawPictorialChart(chartData, rawData);
}
5단계. 대시보드
이제 마침내 이 모든 것을 페이지에 추가할 수 있습니다. 먼저 라이브러리 자체를 추가하십시오.
<script src="https://cdn.flexmonster.com/flexmonster.js"></script>
<script src="https://cdn.flexmonster.com/lib/flexmonster.amcharts.js"></script>
<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/maps.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>
<script src="https://cdn.amcharts.com/lib/4/geodata/worldHigh.js"></script>
CSS 코드에서 레이블의 스타일과 차트의 컨테이너를 미리 지정합니다.
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
.chart-container {
height: 450px;
}
.demo-box {
background-color: #fafafa;
position: relative;
padding: 40px 30px 30px 30px;
border: 1px solid #e9e9e9;
margin-bottom: 20px;
margin-top: 40px;
}
.demo-title {
font-size: 18px;
margin-bottom: 30px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
line-height: 24px;
}
다음으로, 페이지에 행의 모든 구성 요소를 추가하고 차트 제목에 서명합니다.
<div id="pivot-container"></div>
<div class="demo-box">
<div class="demo-title"><strong>Overall Cheese Interest by Month</strong></div>
<div id="amcharts-stacked-container" class="chart-container"></div>
</div>
<div class="demo-box">
<div class="demo-title"><strong>Total Cheese Interest by Country</strong></div>
<div id="amcharts-pictorial-container" class="chart-container"></div>
<div>Icons made by <a href="https://www.freepik.com" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a></div>
</div>
<div class="demo-box">
<div class="demo-title"><strong>Feta Interest by Month</strong></div>
<div id="amcharts-pie-container" class="chart-container"></div>
</div>
<div class="demo-box no-text-before no-text-after">
<div class="demo-title"><strong>Feta Interest by Country</strong></div>
<div id="amcharts-map-container" class="chart-container"></div>
</div>
짜잔! - 인터랙티브하고 현대적인 치즈 만들기 대시보드가 준비되었습니다!
Reference
이 문제에 관하여(Flexmonster Pivot 및 amCharts가 포함된 멋진 대시보드), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/juliianikitina/spectacular-dashboard-with-flexmonster-pivot-and-amcharts-56db
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
function getData() {
return [
{
Date: "2020-01-05",
id: "GR",
CountryCode: "gr",
Country: "Greece",
Feta: 62,
Mozzarella: 8,
"Parmigiano-Reggiano": 8
},
{
Date: "2020-01-12",
id: "GR",
CountryCode: "gr",
Country: "Greece",
Feta: 62,
Mozzarella: 11,
"Parmigiano-Reggiano": 8
},
…
] }
이제 피벗 자체를 생성하고 마지막에 대시보드용 차트를 생성하는 reportcompleteevent 핸들러를 추가해 보겠습니다.
let pivot = new Flexmonster({
container: "pivot-container",
licenseFilePath: "https://cdn.flexmonster.com/codepen.key",
componentFolder: "https://cdn.flexmonster.com/",
height: 440,
customizeCell: customizeCell,
report: {
dataSource: {
data: getData(),
mapping: {
Date: {
type: "date"
},
Country: {
type: "string"
},
id: {
type: "string"
},
CountryCode: {
type: "property",
hierarchy: "Country"
},
Feta: {
type: "number"
},
Mozzarella: {
type: "number"
},
"Parmigiano-Reggiano": {
type: "number"
}
}
},
slice: {
rows: [
{
uniqueName: "Country"
},
{
uniqueName: "[Measures]"
}
],
columns: [
{
uniqueName: "Date.Month",
filter: {
members: [
"date.month.[january]",
"date.month.[february]",
"date.month.[march]",
"date.month.[april]",
"date.month.[may]",
"date.month.[june]"
]
}
}
],
measures: [
{
uniqueName: "Feta",
aggregation: "sum",
grandTotalCaption: "Feta"
},
{
uniqueName: "Mozzarella",
aggregation: "sum",
grandTotalCaption: "Mozzarella"
},
{
uniqueName: "Parmigiano-Reggiano",
aggregation: "sum",
grandTotalCaption: "Parmigiano-Reggiano"
}
]
},
options: {
grid: {
showHeaders: false,
showGrandTotals: "rows"
},
showAggregationLabels: false
}
},
reportcomplete: function () {
pivot.off("reportcomplete");
createPieChart();
createStackedChart();
createMapChart();
createPictorialChart();
}
});
3단계. 커스터마이징
피벗 자체를 더 흥미롭게 만들기 위해 국가에 국기를 추가하는 것이 좋습니다. customizeCell 함수를 통해 이 작업을 수행하고 CSS를 통해 스타일을 설정합니다. 펼쳐진 변형과 접힌 변형 모두에 스타일을 지정하고 있습니다.
function customizeCell(cell, data) {
if (data.hierarchy && data.type == "header") {
console.log(data);
if (
data.hierarchy.caption == "Country" &&
data.member &&
data.member.properties
) {
let name = data.member.properties.CountryCode;
let flag = `<i class="fm-icon ${
data.expanded ? "fm-expanded-icon" : "fm-collapsed-icon"
}"
title="${data.expanded ? "Click to collapse" : "Click to expand"}"></i>
<img class="flag-icon" src="https://cdn.flexmonster.com/i/flags/${name.toLowerCase()}.svg">`;
cell.text = `${flag}<span style="margin-left: 2px; line-height: 16px">${data.member.caption}</span>`;
cell.addClass("fm-custom-cell");
}
}
}
CSS
.fm-custom-cell {
display: flex !important;
align-items: center !important;
font-size: 12px !important;
}
.fm-custom-cell .flag-icon {
width: 21px !important;
height: 16px !important;
margin-left: 0 !important;
margin-right: 2px !important;
}
#fm-pivot-view
.fm-grid-layout
.fm-custom-cell.fm-expanded
.fm-expanded-icon::before,
#fm-pivot-view
.fm-grid-layout
.fm-custom-cell.fm-collapsed
.fm-collapsed-icon::before {
top: -2px;
height: 16px;
}
4단계. 차트
이제 차트에 도달할 수 있습니다.
먼저 차트를 선언하고 차트에서 사용할 색상을 선택합니다.
let mapChart, pieChart, stackedChart, pictorialChart;
// Apply amCharts theme
am4core.useTheme(am4themes_animated);
const chartColors = [
am4core.color("#4CBF8B"),
am4core.color("#FFCD4C"),
am4core.color("#E8734C"),
am4core.color("#9875E3"),
am4core.color("#4C9EFF"),
am4core.color("#8ACFC3"),
am4core.color("#CD97E6"),
am4core.color("#F1D34C"),
am4core.color("#65D2E7")
];
const cheeseColors = [
am4core.color("#FFE268"),
am4core.color("#FFCD4C"),
am4core.color("#FFB037")
];
차트의 데이터는 특별한 getData API 호출을 통해 피벗에서 전송됩니다. 여기처럼:
function createPieChart() {
pivot.amcharts.getData(
{
slice: {
rows: [
{
uniqueName: "Date.Month",
filter: {
members: [
"date.month.[january]",
"date.month.[february]",
"date.month.[march]",
"date.month.[april]",
"date.month.[may]",
"date.month.[june]"
]
}
}
],
measures: [
{
uniqueName: "Feta",
aggregation: "sum"
}
]
}
},
drawPieChart,
updatePieChart
);
}
amCharts 데모 페이지에서 다양한 차트와 그래픽을 찾아 프로젝트에 적용할 수 있습니다. 이 대시보드에서는 StackedChart, PieChart, MapChart 및 PictorialChart를 선택했습니다.
이 기사에서는 PictorialChart를 사용하여 피벗에서 데이터를 전송하는 방법을 보여주고 나머지 차트에서는 모든 것이 동일한 방식으로 작동합니다. demo의 소스 코드에서 더 자세히 공부할 수 있습니다.
따라서 먼저 차트를 초기화한 다음 데이터를 추가합니다.
pictorialChart = am4core.create(
"amcharts-pictorial-container",
am4charts.SlicedChart
);
pictorialChart.data = chartData.data;
이것이 끝을 보는 방법입니다.
function drawPictorialChart(chartData, rawData) {
var iconPath =
"M10.512,156.385l231.164,35.647c-1.779-3.578-2.869-7.554-2.869-11.817c0-14.766,11.962-26.728,26.733-26.728 c14.768,0,26.733,11.962,26.733,26.728c0,7.173-2.861,13.657-7.466,18.466l75.392,11.622c8.752,1.351,12.632-3.979,8.66-11.906 l-35.401-70.833c-4.172,2.687-9.125,4.29-14.459,4.29c-14.768,0-26.726-11.968-26.726-26.733c0-11.491,7.29-21.213,17.473-24.98l-17.429-34.825c-3.955-7.92-13.781-11.547-21.94-8.093L232.122,53.41c5.122,7.019,8.175,15.631,8.175,24.98c0,23.463-19.015,42.477-42.49,42.477c-20.977,0-38.365-15.222-41.804-35.223L9.43,147.683C1.28,151.141,1.759,155.032,10.512,156.385z M125.661,123.215c4.883,0,8.838,3.95,8.838,8.833c0,4.883-3.955,8.833-8.838,8.833c-4.873,0-8.833-3.949-8.833-8.833C116.829,127.165,120.788,123.215,125.661,123.215zM30.294,218.466c17.012,0,30.799,13.793,30.799,30.805c0,16.996-13.788,30.797-30.799,30.797c-6.444,0-12.419-1.987-17.364-5.374l3.048,26.361c1.02,8.812,9.011,16.362,17.859,16.875l189.024,11.157c-0.068-0.754-0.229-1.476-0.229-2.24c0-14.644,11.857-26.497,26.493-26.497c14.643,0,26.497,11.854,26.497,26.497c0,1.815-0.192,3.595-0.529,5.313l59.086,3.486c8.844,0.514,17.34-6.115,18.979-14.827l18.431-98.29L0,162.851l7.598,65.657C13.229,222.353,21.297,218.466,30.294,218.466z M135.451,219.127c10.283,0,18.612,8.331,18.612,18.622c0,10.287-8.337,18.619-18.612,18.619c-10.293,0-18.623-8.332-18.623-18.619C116.829,227.458,125.158,219.127,135.451,219.127zM98.206,271.243c4.885,0,8.844,3.947,8.844,8.829c0,4.885-3.959,8.832-8.844,8.832c-4.871,0-8.831-3.947-8.831-8.832C89.375,275.19,93.335,271.243,98.206,271.243z";
pictorialChart = am4core.create(
"amcharts-pictorial-container",
am4charts.SlicedChart
);
pictorialChart.hiddenState.properties.opacity = 0; // this makes initial fade in effect
pictorialChart.data = chartData.data;
var series = pictorialChart.series.push(
new am4charts.PictorialStackedSeries()
);
series.colors.list = cheeseColors;
series.dataFields.value = pivot.amcharts.getMeasureNameByIndex(rawData, 0);
series.dataFields.category = pivot.amcharts.getCategoryName(rawData);
series.alignLabels = true;
series.labels = "disabled";
series.ticks = "disabled";
series.maskSprite.path = iconPath;
pictorialChart.legend = new am4charts.Legend();
pictorialChart.legend.position = "right";
let marker = pictorialChart.legend.markers.template.children.getIndex(0);
pictorialChart.legend.markers.template.width = 20;
pictorialChart.legend.markers.template.height = 20;
marker.cornerRadius(20, 20, 20, 20);
pictorialChart.responsive.enabled = true;
pictorialChart.responsive.rules.push({
relevant: function (target) {
if (target.pixelWidth <= 600) {
return true;
}
return false;
},
state: function (target, stateId) {
if (target instanceof am4charts.PictorialStackedSeries) {
var state = target.states.create(stateId);
var labelState = target.labels.template.states.create(stateId);
labelState.properties.disabled = true;
var tickState = target.ticks.template.states.create(stateId);
tickState.properties.disabled = true;
return state;
}
return null;
}
});
}
또한 피벗 데이터의 변경 사항에 따라 차트가 대화식으로 유지되고 변환되도록 차트를 업데이트하는 것을 잊지 않습니다.
function updatePictorialChart(chartData, rawData) {
pictorialChart.dispose();
drawPictorialChart(chartData, rawData);
}
5단계. 대시보드
이제 마침내 이 모든 것을 페이지에 추가할 수 있습니다. 먼저 라이브러리 자체를 추가하십시오.
<script src="https://cdn.flexmonster.com/flexmonster.js"></script>
<script src="https://cdn.flexmonster.com/lib/flexmonster.amcharts.js"></script>
<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/maps.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>
<script src="https://cdn.amcharts.com/lib/4/geodata/worldHigh.js"></script>
CSS 코드에서 레이블의 스타일과 차트의 컨테이너를 미리 지정합니다.
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
.chart-container {
height: 450px;
}
.demo-box {
background-color: #fafafa;
position: relative;
padding: 40px 30px 30px 30px;
border: 1px solid #e9e9e9;
margin-bottom: 20px;
margin-top: 40px;
}
.demo-title {
font-size: 18px;
margin-bottom: 30px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
line-height: 24px;
}
다음으로, 페이지에 행의 모든 구성 요소를 추가하고 차트 제목에 서명합니다.
<div id="pivot-container"></div>
<div class="demo-box">
<div class="demo-title"><strong>Overall Cheese Interest by Month</strong></div>
<div id="amcharts-stacked-container" class="chart-container"></div>
</div>
<div class="demo-box">
<div class="demo-title"><strong>Total Cheese Interest by Country</strong></div>
<div id="amcharts-pictorial-container" class="chart-container"></div>
<div>Icons made by <a href="https://www.freepik.com" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a></div>
</div>
<div class="demo-box">
<div class="demo-title"><strong>Feta Interest by Month</strong></div>
<div id="amcharts-pie-container" class="chart-container"></div>
</div>
<div class="demo-box no-text-before no-text-after">
<div class="demo-title"><strong>Feta Interest by Country</strong></div>
<div id="amcharts-map-container" class="chart-container"></div>
</div>
짜잔! - 인터랙티브하고 현대적인 치즈 만들기 대시보드가 준비되었습니다!
Reference
이 문제에 관하여(Flexmonster Pivot 및 amCharts가 포함된 멋진 대시보드), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/juliianikitina/spectacular-dashboard-with-flexmonster-pivot-and-amcharts-56db
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
let mapChart, pieChart, stackedChart, pictorialChart;
// Apply amCharts theme
am4core.useTheme(am4themes_animated);
const chartColors = [
am4core.color("#4CBF8B"),
am4core.color("#FFCD4C"),
am4core.color("#E8734C"),
am4core.color("#9875E3"),
am4core.color("#4C9EFF"),
am4core.color("#8ACFC3"),
am4core.color("#CD97E6"),
am4core.color("#F1D34C"),
am4core.color("#65D2E7")
];
const cheeseColors = [
am4core.color("#FFE268"),
am4core.color("#FFCD4C"),
am4core.color("#FFB037")
];
function createPieChart() {
pivot.amcharts.getData(
{
slice: {
rows: [
{
uniqueName: "Date.Month",
filter: {
members: [
"date.month.[january]",
"date.month.[february]",
"date.month.[march]",
"date.month.[april]",
"date.month.[may]",
"date.month.[june]"
]
}
}
],
measures: [
{
uniqueName: "Feta",
aggregation: "sum"
}
]
}
},
drawPieChart,
updatePieChart
);
}
pictorialChart = am4core.create(
"amcharts-pictorial-container",
am4charts.SlicedChart
);
pictorialChart.data = chartData.data;
function drawPictorialChart(chartData, rawData) {
var iconPath =
"M10.512,156.385l231.164,35.647c-1.779-3.578-2.869-7.554-2.869-11.817c0-14.766,11.962-26.728,26.733-26.728 c14.768,0,26.733,11.962,26.733,26.728c0,7.173-2.861,13.657-7.466,18.466l75.392,11.622c8.752,1.351,12.632-3.979,8.66-11.906 l-35.401-70.833c-4.172,2.687-9.125,4.29-14.459,4.29c-14.768,0-26.726-11.968-26.726-26.733c0-11.491,7.29-21.213,17.473-24.98l-17.429-34.825c-3.955-7.92-13.781-11.547-21.94-8.093L232.122,53.41c5.122,7.019,8.175,15.631,8.175,24.98c0,23.463-19.015,42.477-42.49,42.477c-20.977,0-38.365-15.222-41.804-35.223L9.43,147.683C1.28,151.141,1.759,155.032,10.512,156.385z M125.661,123.215c4.883,0,8.838,3.95,8.838,8.833c0,4.883-3.955,8.833-8.838,8.833c-4.873,0-8.833-3.949-8.833-8.833C116.829,127.165,120.788,123.215,125.661,123.215zM30.294,218.466c17.012,0,30.799,13.793,30.799,30.805c0,16.996-13.788,30.797-30.799,30.797c-6.444,0-12.419-1.987-17.364-5.374l3.048,26.361c1.02,8.812,9.011,16.362,17.859,16.875l189.024,11.157c-0.068-0.754-0.229-1.476-0.229-2.24c0-14.644,11.857-26.497,26.493-26.497c14.643,0,26.497,11.854,26.497,26.497c0,1.815-0.192,3.595-0.529,5.313l59.086,3.486c8.844,0.514,17.34-6.115,18.979-14.827l18.431-98.29L0,162.851l7.598,65.657C13.229,222.353,21.297,218.466,30.294,218.466z M135.451,219.127c10.283,0,18.612,8.331,18.612,18.622c0,10.287-8.337,18.619-18.612,18.619c-10.293,0-18.623-8.332-18.623-18.619C116.829,227.458,125.158,219.127,135.451,219.127zM98.206,271.243c4.885,0,8.844,3.947,8.844,8.829c0,4.885-3.959,8.832-8.844,8.832c-4.871,0-8.831-3.947-8.831-8.832C89.375,275.19,93.335,271.243,98.206,271.243z";
pictorialChart = am4core.create(
"amcharts-pictorial-container",
am4charts.SlicedChart
);
pictorialChart.hiddenState.properties.opacity = 0; // this makes initial fade in effect
pictorialChart.data = chartData.data;
var series = pictorialChart.series.push(
new am4charts.PictorialStackedSeries()
);
series.colors.list = cheeseColors;
series.dataFields.value = pivot.amcharts.getMeasureNameByIndex(rawData, 0);
series.dataFields.category = pivot.amcharts.getCategoryName(rawData);
series.alignLabels = true;
series.labels = "disabled";
series.ticks = "disabled";
series.maskSprite.path = iconPath;
pictorialChart.legend = new am4charts.Legend();
pictorialChart.legend.position = "right";
let marker = pictorialChart.legend.markers.template.children.getIndex(0);
pictorialChart.legend.markers.template.width = 20;
pictorialChart.legend.markers.template.height = 20;
marker.cornerRadius(20, 20, 20, 20);
pictorialChart.responsive.enabled = true;
pictorialChart.responsive.rules.push({
relevant: function (target) {
if (target.pixelWidth <= 600) {
return true;
}
return false;
},
state: function (target, stateId) {
if (target instanceof am4charts.PictorialStackedSeries) {
var state = target.states.create(stateId);
var labelState = target.labels.template.states.create(stateId);
labelState.properties.disabled = true;
var tickState = target.ticks.template.states.create(stateId);
tickState.properties.disabled = true;
return state;
}
return null;
}
});
}
function updatePictorialChart(chartData, rawData) {
pictorialChart.dispose();
drawPictorialChart(chartData, rawData);
}
이제 마침내 이 모든 것을 페이지에 추가할 수 있습니다. 먼저 라이브러리 자체를 추가하십시오.
<script src="https://cdn.flexmonster.com/flexmonster.js"></script>
<script src="https://cdn.flexmonster.com/lib/flexmonster.amcharts.js"></script>
<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/maps.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>
<script src="https://cdn.amcharts.com/lib/4/geodata/worldHigh.js"></script>
CSS 코드에서 레이블의 스타일과 차트의 컨테이너를 미리 지정합니다.
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
.chart-container {
height: 450px;
}
.demo-box {
background-color: #fafafa;
position: relative;
padding: 40px 30px 30px 30px;
border: 1px solid #e9e9e9;
margin-bottom: 20px;
margin-top: 40px;
}
.demo-title {
font-size: 18px;
margin-bottom: 30px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
line-height: 24px;
}
다음으로, 페이지에 행의 모든 구성 요소를 추가하고 차트 제목에 서명합니다.
<div id="pivot-container"></div>
<div class="demo-box">
<div class="demo-title"><strong>Overall Cheese Interest by Month</strong></div>
<div id="amcharts-stacked-container" class="chart-container"></div>
</div>
<div class="demo-box">
<div class="demo-title"><strong>Total Cheese Interest by Country</strong></div>
<div id="amcharts-pictorial-container" class="chart-container"></div>
<div>Icons made by <a href="https://www.freepik.com" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a></div>
</div>
<div class="demo-box">
<div class="demo-title"><strong>Feta Interest by Month</strong></div>
<div id="amcharts-pie-container" class="chart-container"></div>
</div>
<div class="demo-box no-text-before no-text-after">
<div class="demo-title"><strong>Feta Interest by Country</strong></div>
<div id="amcharts-map-container" class="chart-container"></div>
</div>
짜잔! - 인터랙티브하고 현대적인 치즈 만들기 대시보드가 준비되었습니다!
Reference
이 문제에 관하여(Flexmonster Pivot 및 amCharts가 포함된 멋진 대시보드), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/juliianikitina/spectacular-dashboard-with-flexmonster-pivot-and-amcharts-56db텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
