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.
219 lines
6.8 KiB
219 lines
6.8 KiB
// amcharts |
|
let am4core = window.am4core; |
|
let am4charts = window.am4charts; |
|
let am4themes_animated = window.am4themes_animated; |
|
let am4themes_dark = window.am4themes_dark; |
|
|
|
am4core.useTheme(am4themes_dark); |
|
// #region 表一 |
|
let chart = am4core.create("chartViolation", am4charts.PieChart3D); |
|
chart.colors.list = [am4core.color("#FF0000")]; |
|
chart.legend = new am4charts.Legend(); |
|
// 設定圖例的位置 |
|
chart.legend.position = "bottom"; // 可選值有 "left", "right", "top", "bottom" |
|
chart.legend.valign = "middle"; // 可選值有 "top", "middle", "bottom" |
|
|
|
// 設定圖例標籤的樣式 |
|
chart.legend.labels.template.fontSize = 22; // 字體大小 |
|
|
|
|
|
let chartColor = [ |
|
am4core.color("#C95F59"), |
|
am4core.color("#E6986A"), |
|
am4core.color("#DFC333"), |
|
am4core.color("#65C581"), |
|
am4core.color("#00A7C7"), |
|
am4core.color("#4664BA"), |
|
am4core.color("#9156FC"), |
|
am4core.color("#7E71FB"), |
|
am4core.color("#D6635C"), |
|
am4core.color("#33952E") |
|
] |
|
|
|
chart.innerRadius = am4core.percent(0); |
|
let pieSeries = chart.series.push(new am4charts.PieSeries3D()); |
|
|
|
function drawPie(data) { |
|
data.forEach((item, index) => { |
|
item.color = chartColor[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 = "times"; |
|
pieSeries.dataFields.category = "title"; |
|
pieSeries.dataFields.color = "color"; |
|
} |
|
|
|
|
|
|
|
|
|
|
|
// #endregion |
|
|
|
// -------------------------------------------- |
|
|
|
// #region 表二 |
|
let chart2 = am4core.create("chartViolation2", am4charts.PieChart3D); |
|
chart2.colors.list = [am4core.color("#FF0000")]; |
|
chart2.legend = new am4charts.Legend(); |
|
// 設定圖例的位置 |
|
chart2.legend.position = "bottom"; // 可選值有 "left", "right", "top", "bottom" |
|
chart2.legend.valign = "middle"; // 可選值有 "top", "middle", "bottom" |
|
|
|
// 設定圖例標籤的樣式 |
|
chart2.legend.labels.template.fontSize = 22; // 字體大小 |
|
// chart2.legend.labels.template.fill = am4core.color("#555555"); // 字體顏色 |
|
|
|
chart2.innerRadius = am4core.percent(0); |
|
|
|
let pieSeries2 = chart2.series.push(new am4charts.PieSeries3D()); |
|
|
|
function drawPie2(data) { |
|
data.forEach((item, index) => { |
|
item.color = chartColor[index]; |
|
}); |
|
chart2.data = data; |
|
// 設定邊框顏色、線條粗細和填充顏色 |
|
pieSeries2.slices.template.stroke = am4core.color("#ffffff"); |
|
pieSeries2.slices.template.strokeWidth = 2; |
|
|
|
pieSeries2.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; |
|
} |
|
}); |
|
|
|
|
|
pieSeries2.dataFields.value = "times"; |
|
pieSeries2.dataFields.category = "title"; |
|
pieSeries2.dataFields.color = "color"; |
|
} |
|
|
|
// #endregion |
|
// -------------------------------------------- |
|
|
|
// #region 表三 |
|
/* Chart code */ |
|
// Themes begin |
|
am4core.useTheme(am4themes_animated); |
|
// Themes end |
|
|
|
let chart3 = am4core.create('chartViolation3', 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.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); |
|
}) |
|
} |
|
} |
|
} |
|
// #endregion
|
|
|