You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
286 lines
9.3 KiB
286 lines
9.3 KiB
// amcharts |
|
// #region 儀錶板圓餅圖 |
|
let am4core = window.am4core; |
|
let am4charts = window.am4charts; |
|
let am4themes_animated = window.am4themes_animated; |
|
let am4themes_dark = window.am4themes_dark; |
|
|
|
|
|
am4core.useTheme(am4themes_dark); |
|
|
|
let chart = am4core.create("chartdiv", am4charts.PieChart3D); |
|
chart.colors.list = [ |
|
am4core.color("#f5576b"), |
|
am4core.color("#3FED95"), |
|
am4core.color("#004FD3"), |
|
am4core.color("#DE5389"), |
|
am4core.color("#FF7BAB"), |
|
am4core.color("#A9ED39"), |
|
am4core.color("#49BAF0"), |
|
am4core.color("#C139ED"), |
|
am4core.color("#FFDE7F"), |
|
am4core.color("#00BBBA") |
|
]; |
|
chart.legend = new am4charts.Legend(); |
|
// 設定圖例的位置 |
|
chart.legend.position = "bottom"; // 可選值有 "left", "right", "top", "bottom" |
|
chart.legend.valign = "middle"; // 可選值有 "top", "middle", "bottom" |
|
|
|
chart.innerRadius = am4core.percent(0); |
|
|
|
let pieSeries = chart.series.push(new am4charts.PieSeries3D()); |
|
|
|
function drawPie(data) { |
|
// 清除舊的圓餅圖 |
|
chart.data = []; |
|
|
|
data.forEach((item, index) => { |
|
item.color = chart.colors.list[index]; |
|
}); |
|
chart.data = data; |
|
|
|
// 設定邊框顏色、線條粗細和填充顏色 |
|
pieSeries.slices.template.stroke = am4core.color("#ffffff"); |
|
pieSeries.slices.template.strokeWidth = 2; |
|
|
|
pieSeries.slices.template.adapter.add("fill", function (fill, target) { |
|
// Check if the data item has a color property |
|
if (target.dataItem && target.dataItem.dataContext && target.dataItem.dataContext.color) { |
|
return target.dataItem.dataContext.color; |
|
} |
|
// If not, use the color from the chart's color list based on the data item's index |
|
return chart.colors.list[target.dataItem.index % chart.colors.list.length]; |
|
}); |
|
|
|
pieSeries.dataFields.value = "count"; |
|
pieSeries.dataFields.category = "violationtype"; |
|
pieSeries.dataFields.color = "color"; |
|
} |
|
|
|
// #endregion |
|
|
|
|
|
// -------------------------------------------------- |
|
// Bar chart |
|
|
|
// let chart3 = am4core.create('chartdiv2', am4charts.XYChart) |
|
// chart3.colors.step = 2; |
|
|
|
// chart3.legend = new am4charts.Legend() |
|
// chart3.legend.position = 'top' |
|
// chart3.legend.paddingBottom = 20 |
|
// chart3.legend.labels.template.maxWidth = 95 |
|
// chart3.legend.labels.template.fontSize = 22; // 字體大小 |
|
// chart3.scrollbarX = new am4core.Scrollbar(); |
|
// chart3.maskBullets = false; |
|
|
|
// let xAxis = chart3.xAxes.push(new am4charts.CategoryAxis()) |
|
// xAxis.dataFields.category = 'category' |
|
// xAxis.renderer.cellStartLocation = 0.1 |
|
// xAxis.renderer.cellEndLocation = 0.9 |
|
// xAxis.renderer.grid.template.location = 0; |
|
|
|
// let yAxis = chart3.yAxes.push(new am4charts.ValueAxis()); |
|
// yAxis.min = 0; |
|
|
|
// function createSeries(value, name) { |
|
|
|
// let series = chart3.series.push(new am4charts.ColumnSeries()) |
|
// series.dataFields.valueY = value |
|
// series.dataFields.categoryX = 'category' |
|
|
|
// series.columns.template.hoverOnFocus = true; |
|
|
|
// series.columns.template.focusable = true; |
|
|
|
// series.columns.template.tooltipText = "{name}: {valueY}"; |
|
|
|
// chart3.series.each(function (series) { |
|
// series.columns.template.adapter.add("label.visible", function (visible, target) { |
|
// return target.dataItem.values.valueY > 50; |
|
// }); |
|
// }); |
|
|
|
// series.name = name |
|
|
|
// series.events.on("hidden", arrangeColumns); |
|
// series.events.on("shown", arrangeColumns); |
|
|
|
// let bullet = series.bullets.push(new am4charts.LabelBullet()) |
|
// bullet.interactionsEnabled = false |
|
// // bullet.dy = 30; |
|
// // bullet.label.text = '{valueY}' |
|
// // bullet.label.fill = am4core.color('#ffffff') |
|
// bullet.label.text = '{valueY}'; |
|
// bullet.label.fontWeight = 'bold'; |
|
// bullet.label.dy = -15; |
|
|
|
|
|
// return series; |
|
// } |
|
|
|
|
|
// function drawBar(data, violationtype) { |
|
// // 清除圖表數據 |
|
// chart3.series.clear(); |
|
// chart3.data = data; |
|
// // console.log(data, chart3.data); |
|
// // 重新繪製圖表 |
|
// violationtype.forEach((item, index) => { |
|
// // console.log(item, index); |
|
// createSeries(index, item); |
|
// }); |
|
// } |
|
|
|
|
|
// function arrangeColumns() { |
|
|
|
// let series = chart3.series.getIndex(0); |
|
|
|
// let w = 1 - xAxis.renderer.cellStartLocation - (1 - xAxis.renderer.cellEndLocation); |
|
// if (series.dataItems.length > 1) { |
|
// let x0 = xAxis.getX(series.dataItems.getIndex(0), "categoryX"); |
|
// let x1 = xAxis.getX(series.dataItems.getIndex(1), "categoryX"); |
|
// let delta = ((x1 - x0) / chart3.series.length) * w; |
|
// if (am4core.isNumber(delta)) { |
|
// let middle = chart3.series.length / 2; |
|
|
|
// let newIndex = 0; |
|
// chart3.series.each(function (series) { |
|
// if (!series.isHidden && !series.isHiding) { |
|
// series.dummyData = newIndex; |
|
// newIndex++; |
|
// } |
|
// else { |
|
// series.dummyData = chart3.series.indexOf(series); |
|
// } |
|
// }) |
|
// let visibleCount = newIndex; |
|
// let newMiddle = visibleCount / 2; |
|
|
|
// chart3.series.each(function (series) { |
|
// let trueIndex = chart3.series.indexOf(series); |
|
// let newIndex = series.dummyData; |
|
|
|
// let dx = (newIndex - trueIndex + middle - newMiddle) * delta |
|
|
|
// series.animate({ property: "dx", to: dx }, series.interpolationDuration, series.interpolationEasing); |
|
// series.bulletsContainer.animate({ property: "dx", to: dx }, series.interpolationDuration, series.interpolationEasing); |
|
// }) |
|
// } |
|
// } |
|
// } |
|
|
|
// Add data & color |
|
|
|
// -------------------------------------------------- |
|
|
|
// #region 儀錶板下方圓餅圖 |
|
// 先用for迴圈產生指定數量的div.chartb1~n (n為數量) |
|
// 接著再使用 am4core.create 產生n個圓餅圖 |
|
// 並且根據每個圓餅圖所需的資料進行繪製 (drawPieb1~n) |
|
// #endregion |
|
// -------------------------------------------------- |
|
// 取得 API 資料 (圓餅圖數量 n) |
|
|
|
function getBottomPieNum() { |
|
let num = 4; |
|
return num; |
|
} |
|
function drawPieb(data, chart, pieSeries) { |
|
// 清除舊的圓餅圖 |
|
chart.data = []; |
|
|
|
data.forEach((item, index) => { |
|
item.color = chart.colors.list[index]; |
|
}); |
|
chart.data = data; |
|
|
|
// 設定邊框顏色、線條粗細和填充顏色 |
|
pieSeries.slices.template.stroke = am4core.color("#ffffff"); |
|
pieSeries.slices.template.strokeWidth = 2; |
|
|
|
pieSeries.slices.template.adapter.add("fill", function (fill, target) { |
|
// Check if the data item has a color property |
|
if (target.dataItem && target.dataItem.dataContext && target.dataItem.dataContext.color) { |
|
return target.dataItem.dataContext.color; |
|
} |
|
// If not, use the color from the chart's color list based on the data item's index |
|
return chart.colors.list[target.dataItem.index % chart.colors.list.length]; |
|
}); |
|
|
|
pieSeries.dataFields.value = "count"; |
|
pieSeries.dataFields.category = "violationtype"; |
|
pieSeries.dataFields.color = "color"; |
|
} |
|
document.addEventListener('DOMContentLoaded', function () { |
|
// 取得圓餅圖數量 |
|
let bottom_pie_num = getBottomPieNum(); |
|
// 產生圓餅圖div區塊 |
|
for (let i = 1; i <= bottom_pie_num; i++) { |
|
let chartdiv = document.createElement('div'); |
|
chartdiv.id = 'chartb' + i; |
|
chartdiv.className = 'col-3'; |
|
document.getElementById('bottom_pie').appendChild(chartdiv); |
|
} |
|
// 產生圓餅圖 |
|
for (let i = 1; i <= bottom_pie_num; i++) { |
|
let chart = am4core.create('chartb' + i, am4charts.PieChart3D); |
|
chart.colors.list = [ |
|
am4core.color("#f5576b"), |
|
am4core.color("#3FED95"), |
|
am4core.color("#004FD3"), |
|
am4core.color("#DE5389"), |
|
am4core.color("#FF7BAB"), |
|
am4core.color("#A9ED39"), |
|
am4core.color("#49BAF0"), |
|
am4core.color("#C139ED"), |
|
am4core.color("#FFDE7F"), |
|
am4core.color("#00BBBA") |
|
]; |
|
chart.legend = new am4charts.Legend(); |
|
chart.legend.position = "bottom"; |
|
chart.legend.valign = "middle"; |
|
// 不顯示圖例 |
|
chart.legend.disabled = true; |
|
// 設定圓餅圖的內半徑 |
|
chart.innerRadius = am4core.percent(40); |
|
// 設定圓餅圖的深度 |
|
chart.depth = 10; |
|
// 設定圓餅圖的角度 |
|
chart.angle = 50; |
|
|
|
let pieSeries = chart.series.push(new am4charts.PieSeries3D()); |
|
// 不顯示圓餅圖周圍的數據 |
|
pieSeries.labels.template.disabled = true; |
|
// 不顯示圓餅圖周圍的數據的線條 |
|
pieSeries.ticks.template.disabled = true; |
|
// 取得圓餅圖資料 |
|
let data = [ |
|
{ |
|
"violationtype": "違規1", |
|
"count": 10 |
|
}, |
|
{ |
|
"violationtype": "違規2", |
|
"count": 20 |
|
}, |
|
{ |
|
"violationtype": "違規3", |
|
"count": 30 |
|
}, |
|
{ |
|
"violationtype": "違規4", |
|
"count": 40 |
|
}, |
|
{ |
|
"violationtype": "違規5", |
|
"count": 50 |
|
} |
|
]; |
|
// 繪製圓餅圖 |
|
drawPieb(data, chart, pieSeries); |
|
} |
|
}); |
|
|
|
|
|
|