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.
296 lines
9.0 KiB
296 lines
9.0 KiB
// amcharts |
|
// import '/amcharts_4.10.38/core.js' |
|
// import '/amcharts_4.10.38/charts.js' |
|
// import '/amcharts_4.10.38/themes/dark.js' |
|
|
|
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.legend.paddingTop = 10; // 上方間距 |
|
// chart.legend.paddingRight = 12; // 右側間距 |
|
// chart.legend.paddingBottom = 10; // 下方間距 |
|
// chart.legend.paddingLeft = 12; // 左側間距 |
|
|
|
// 設定圖例的背景顏色和邊框 |
|
// chart.legend.background.fill = am4core.color("#f5f5f5"); // 背景顏色 |
|
// chart.legend.background.stroke = am4core.color("#d1d1d1"); // 邊框顏色 |
|
// chart.legend.background.strokeWidth = 1; // 邊框寬度 |
|
// chart.legend.background.cornerRadius = 8; // 背景圓角 |
|
|
|
// 設定圖例標籤的樣式 |
|
// chart.legend.labels.template.fontSize = 12; // 字體大小 |
|
// chart.legend.labels.template.fill = am4core.color("#555555"); // 字體顏色 |
|
|
|
// 設定圖例標記的大小 |
|
// chart.legend.markers.template.width = 20; |
|
// chart.legend.markers.template.height = 20; |
|
|
|
// 如果您想要更改標記的形狀，例如使用圓形而不是方形 |
|
// chart.legend.markers.template.circle.stroke = am4core.color("#ff0000"); |
|
// chart.legend.markers.template.circle.fill = am4core.color("#ff0000"); |
|
|
|
chart.data = [{ |
|
"violationtype": "Lithuania", |
|
"litres": 501.9, |
|
"color": am4core.color("#f5576b") |
|
}, { |
|
"violationtype": "Czech Republic", |
|
"litres": 301.9, |
|
"color": am4core.color("#3FED95") |
|
}, { |
|
"violationtype": "Ireland", |
|
"litres": 201.1, |
|
"color": am4core.color("#004FD3") |
|
}, { |
|
"violationtype": "Germany", |
|
"litres": 165.8, |
|
"color": am4core.color("#DE5389") |
|
}, { |
|
"violationtype": "Australia", |
|
"litres": 139.9, |
|
"color": am4core.color("#FF7BAB") |
|
}, { |
|
"violationtype": "Austria", |
|
"litres": 128.3, |
|
"color": am4core.color("#A9ED39") |
|
}, { |
|
"violationtype": "UK", |
|
"litres": 99, |
|
"color": am4core.color("#49BAF0") |
|
}, { |
|
"violationtype": "Belgium", |
|
"litres": 60, |
|
"color": am4core.color("#C139ED") |
|
}, { |
|
"violationtype": "The Netherlands", |
|
"litres": 50, |
|
"color": am4core.color("#FFDE7F") |
|
}, { |
|
"violationtype": "The Netherlands2", |
|
"litres": 50, |
|
"color": am4core.color("#00BBBA") |
|
}]; |
|
|
|
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) { |
|
// if (target.dataItem && target.dataItem.dataContext && target.dataItem.dataContext.color) { |
|
// return target.dataItem && target.dataItem.dataContext && target.dataItem.dataContext.color ? target.dataItem.dataContext.color : fill; |
|
// } |
|
// // If not, use the next color from the chart's color list |
|
// return chart.colors.next(); |
|
// }); |
|
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.slices.template.tooltipText = ""; |
|
// 圓餅圖周圍的數據(常態顯示) |
|
// pieSeries.labels.template.disabled = true; |
|
// 圓餅圖周圍的數據(常態顯示) 的線條 |
|
// pieSeries.ticks.template.disabled = true; |
|
|
|
pieSeries.dataFields.value = "count"; |
|
pieSeries.dataFields.category = "violationtype"; |
|
pieSeries.dataFields.color = "color"; |
|
} |
|
|
|
|
|
|
|
|
|
// -------------------------------------------------- |
|
// Bar chart |
|
// Create chart instance |
|
// let chart2 = am4core.create("chartdiv2", am4charts.XYChart); |
|
|
|
// Add data & color |
|
|
|
|
|
|
|
// -------------------------------------------------- |
|
// Highcharts |
|
// import '/Highcharts-11.1.0/code/highcharts.js' |
|
// import '/Highcharts-11.1.0/code/highcharts-3d.js' |
|
// import '/Highcharts-11.1.0/code/modules/exporting.js' |
|
// import '/Highcharts-11.1.0/code/modules/export-data.js' |
|
// import '/Highcharts-11.1.0/code/modules/accessibility.js' |
|
|
|
// // Example to create a simple line chart in a div#pie: |
|
// Highcharts.chart("pie", { |
|
// chart: { |
|
// type: "pie", |
|
// options3d: { |
|
// enabled: true, |
|
// alpha: 45 |
|
// } |
|
// }, |
|
// title: { |
|
// useHTML: true, |
|
// text: "<span class='pie_title'></span>" |
|
// }, |
|
// subtitle: { |
|
// // text: "As per statistics data 2016" |
|
// }, |
|
// plotOptions: { |
|
// pie: { |
|
// innerSize: 100, |
|
// depth: 65, |
|
// allowPointSelect: false, |
|
// cursor: "pointer", |
|
// dataLabels: { |
|
// enabled: true, |
|
// format: "{point.name} ({point.percentage:.1f}%)", |
|
// connectorWidth: 2 |
|
// }, |
|
// borderColor: null, |
|
// borderWidth: 0 // < set this option |
|
// } |
|
// }, |
|
// colors: ["#3b5998", "#d34836", "#8a3ab9", "#0077B5", "#0084b4", "#bb0000"], |
|
// series: [ |
|
// { |
|
// name: "Million user", |
|
// data: [ |
|
// ["Facebook", 1300], |
|
// ["Google+", 375], |
|
// ["Instagram", 500], |
|
// { name: "LinkedIn", y: 450, sliced: false, selected: false }, |
|
// ["Twitter", 313], |
|
// ["YouTube", 1000] |
|
// ] |
|
// } |
|
// ], |
|
// tooltip: { |
|
// useHTML: true, |
|
// // formatter: () => { |
|
// // console.log() |
|
// // return ` |
|
// // <span style="color:white"> |
|
// // <h1>{point.key}</h1> |
|
// // <h4>{point.percentage:.1f} {series.name} </h4> |
|
// // </span> |
|
// // `; |
|
// // }, |
|
// headerFormat: "<h1 class='pie_title'>{point.key}</h1>", |
|
// pointFormat: "<h4 class='pie_content'>{point.percentage:.1f} {series.name} </h4>" |
|
// } |
|
// }); |
|
|
|
// // Bar chart |
|
// Highcharts.chart('bar', { |
|
// chart: { |
|
// type: 'column' |
|
// }, |
|
// title: { |
|
// text: 'Corn vs wheat estimated production for 2020', |
|
// align: 'left' |
|
// }, |
|
// subtitle: { |
|
// text: |
|
// 'Source: <a target="_blank" ' + |
|
// 'href="https://www.indexmundi.com/agriculture/?commodity=corn">indexmundi</a>', |
|
// align: 'left' |
|
// }, |
|
// xAxis: { |
|
// categories: ['USA', 'China', 'Brazil', 'EU', 'India', 'Russia'], |
|
// crosshair: true, |
|
// accessibility: { |
|
// description: 'Countries' |
|
// } |
|
// }, |
|
// yAxis: { |
|
// min: 0, |
|
// title: { |
|
// text: '1000 metric tons (MT)' |
|
// } |
|
// }, |
|
// tooltip: { |
|
// valueSuffix: ' (1000 MT)' |
|
// }, |
|
// plotOptions: { |
|
// column: { |
|
// pointPadding: 0.2, |
|
// borderWidth: 0 |
|
// } |
|
// }, |
|
// series: [ |
|
// { |
|
// name: 'Corn', |
|
// data: [406292, 260000, 107000, 68300, 27500, 14500] |
|
// }, |
|
// { |
|
// name: 'Wheat', |
|
// data: [51086, 136000, 5500, 141000, 107180, 77000] |
|
// } |
|
// ] |
|
// }); |
|
|
|
// -------------------------------------------------- |
|
// Google charts |
|
// import '/js/v2/charts_loader.js' |
|
|
|
// google.charts.load('current', { 'packages': ['corechart'] }); |
|
// google.charts.setOnLoadCallback(drawPieChart); |
|
|
|
// function drawPieChart() { |
|
// let data = google.visualization.arrayToDataTable([ |
|
// ['Task', 'Hours per Day'], |
|
// ['Work', 8], |
|
// ['Eat', 2], |
|
// ['TV', 4], |
|
// ['Gym', 2], |
|
// ['Sleep', 8] |
|
// ]); |
|
// let options = { |
|
// title: 'My Daily Activities', |
|
// legend: 'bottom', |
|
// is3D: true, |
|
// height: 350, |
|
// }; |
|
// let chart = new google.visualization.PieChart(document.getElementById('pieChart')); |
|
// chart.draw(data, options); |
|
// } |
|
// --------------------------------------------------
|
|
|