案例1
| <!DOCTYPE html> |
| <html> |
| <head> |
| <script src="https://cdn.amcharts.com/lib/5/index.js"></script> |
| <script src="https://cdn.amcharts.com/lib/5/percent.js"></script> |
| <script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script> |
| <style> |
| #chartdiv { |
| width: 550PX; |
| height: 280px; |
| } |
| </style> |
| </head> |
| <body> |
| <div id="chartdiv"></div> |
| |
| <script> |
| am5.ready(function() { |
| |
| |
| |
| var root = am5.Root.new("chartdiv"); |
| |
| |
| |
| root.setThemes([ |
| am5themes_Animated.new(root) |
| ]); |
| |
| |
| |
| |
| var chart = root.container.children.push( |
| am5percent.PieChart.new(root, { |
| layout: root.verticalLayout |
| }) |
| ); |
| |
| |
| |
| |
| var series0 = chart.series.push( |
| am5percent.PieSeries.new(root, { |
| valueField: "value", |
| categoryField: "category", |
| alignLabels: false, |
| radius: am5.percent(100), |
| innerRadius: am5.percent(80) |
| }) |
| ); |
| |
| series0.states.create("hidden", { |
| startAngle: 180, |
| endAngle: 180 |
| }); |
| |
| series0.slices.template.setAll({ |
| fillOpacity: 0.5, |
| strokeOpacity: 0, |
| templateField: "settings" |
| }); |
| |
| series0.slices.template.states.create("hover", { scale: 1 }); |
| series0.slices.template.states.create("active", { shiftRadius:0 }); |
| |
| series0.labels.template.setAll({ |
| templateField: "settings" |
| }); |
| |
| series0.ticks.template.setAll({ |
| templateField: "settings" |
| }); |
| |
| series0.labels.template.setAll({ |
| textType: "circular", |
| radius: 30 |
| }); |
| |
| |
| |
| series0.data.setAll([ |
| { |
| category: "First + Second", |
| value: 60 |
| }, |
| { |
| category: "Unused", |
| value: 30, |
| settings: { forceHidden: true } |
| } |
| ]); |
| |
| |
| |
| |
| var series1 = chart.series.push( |
| am5percent.PieSeries.new(root, { |
| radius: am5.percent(95), |
| innerRadius: am5.percent(85), |
| valueField: "value", |
| categoryField: "category", |
| alignLabels: false |
| }) |
| ); |
| |
| series1.states.create("hidden", { |
| startAngle: 180, |
| endAngle: 180 |
| }); |
| |
| series1.slices.template.setAll({ |
| templateField: "sliceSettings", |
| strokeOpacity: 0 |
| }); |
| |
| series1.labels.template.setAll({ |
| textType: "circular" |
| }); |
| |
| series1.labels.template.adapters.add("radius", function (radius, target) { |
| var dataItem = target.dataItem; |
| var slice = dataItem.get("slice"); |
| return -(slice.get("radius") - slice.get("innerRadius")) / 2 - 10; |
| }); |
| |
| series1.slices.template.states.create("hover", { scale: 1 }); |
| series1.slices.template.states.create("active", { shiftRadius:0 }); |
| |
| series1.ticks.template.setAll({ |
| forceHidden: true |
| }); |
| |
| |
| |
| series1.data.setAll([{ |
| category: "First", |
| value: 30 |
| }, { |
| category: "Second", |
| value: 30 |
| }, { |
| category: "Remaining", |
| value: 30, |
| sliceSettings: { fill: am5.color(0xdedede) } |
| }]); |
| |
| }); |
| </script> |
| </body> |
| </html> |
点击查看详情

案例2
| <!DOCTYPE html> |
| <html> |
| <head> |
| <script src="https://cdn.amcharts.com/lib/5/index.js"></script> |
| <script src="https://cdn.amcharts.com/lib/5/percent.js"></script> |
| <script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script> |
| <style> |
| #chartdiv { |
| width: 550PX; |
| height: 280px; |
| } |
| </style> |
| </head> |
| <body> |
| <div id="chartdiv"></div> |
| |
| <script> |
| am5.ready(function() { |
| |
| |
| var chartData = { |
| "1995": [ |
| { sector: "Agriculture", size: 6.6 }, |
| { sector: "Mining and Quarrying", size: 0.6 }, |
| { sector: "Manufacturing", size: 23.2 }, |
| { sector: "Electricity and Water", size: 2.2 }, |
| { sector: "Construction", size: 4.5 }, |
| { sector: "Trade (Wholesale, Retail, Motor)", size: 14.6 }, |
| { sector: "Transport and Communication", size: 9.3 }, |
| { sector: "Finance, real estate and business services", size: 22.5 } ], |
| "1996": [ |
| { sector: "Agriculture", size: 6.4 }, |
| { sector: "Mining and Quarrying", size: 0.5 }, |
| { sector: "Manufacturing", size: 22.4 }, |
| { sector: "Electricity and Water", size: 2 }, |
| { sector: "Construction", size: 4.2 }, |
| { sector: "Trade (Wholesale, Retail, Motor)", size: 14.8 }, |
| { sector: "Transport and Communication", size: 9.7 }, |
| { sector: "Finance, real estate and business services", size: 22 } ], |
| "1997": [ |
| { sector: "Agriculture", size: 6.1 }, |
| { sector: "Mining and Quarrying", size: 0.2 }, |
| { sector: "Manufacturing", size: 20.9 }, |
| { sector: "Electricity and Water", size: 1.8 }, |
| { sector: "Construction", size: 4.2 }, |
| { sector: "Trade (Wholesale, Retail, Motor)", size: 13.7 }, |
| { sector: "Transport and Communication", size: 9.4 }, |
| { sector: "Finance, real estate and business services", size: 22.1 } ] |
| }; |
| |
| |
| |
| var root = am5.Root.new("chartdiv"); |
| |
| |
| |
| |
| root.setThemes([ |
| am5themes_Animated.new(root) |
| ]); |
| |
| |
| |
| |
| var chart = root.container.children.push(am5percent.PieChart.new(root, { |
| innerRadius: 100, |
| layout: root.verticalLayout |
| })); |
| |
| |
| |
| |
| var series = chart.series.push(am5percent.PieSeries.new(root, { |
| valueField: "size", |
| categoryField: "sector" |
| })); |
| |
| |
| |
| |
| series.data.setAll([ |
| { sector: "Agriculture", size: 6.6 }, |
| { sector: "Mining and Quarrying", size: 0.6 }, |
| { sector: "Manufacturing", size: 23.2 }, |
| { sector: "Electricity and Water", size: 2.2 }, |
| { sector: "Construction", size: 4.5 }, |
| { sector: "Trade (Wholesale, Retail, Motor)", size: 14.6 }, |
| { sector: "Transport and Communication", size: 9.3 }, |
| { sector: "Finance, real estate and business services", size: 22.5 } |
| ]); |
| |
| |
| |
| |
| series.appear(1000, 100); |
| |
| |
| |
| var label = root.tooltipContainer.children.push(am5.Label.new(root, { |
| x: am5.p50, |
| y: am5.p50, |
| centerX: am5.p50, |
| centerY: am5.p50, |
| fill: am5.color(0x000000), |
| fontSize: 50 |
| })); |
| |
| |
| |
| var currentYear = 1995; |
| function getCurrentData() { |
| var data = chartData[currentYear]; |
| currentYear++; |
| if (currentYear > 2014) |
| currentYear = 1995; |
| return data; |
| } |
| |
| function loop() { |
| label.set("text", currentYear); |
| var data = getCurrentData(); |
| for(var i = 0; i < data.length; i++) { |
| series.data.setIndex(i, data[i]); |
| } |
| chart.setTimeout( loop, 4000 ); |
| } |
| |
| loop(); |
| |
| }); |
| </script> |
| </body> |
| </html> |
点击查看详情

案例3
| <!DOCTYPE html> |
| <html> |
| <head> |
| <script src="https://cdn.amcharts.com/lib/5/index.js"></script> |
| <script src="https://cdn.amcharts.com/lib/5/percent.js"></script> |
| <script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script> |
| <style> |
| #chartdiv { |
| width: 700PX; |
| height: 700px; |
| } |
| </style> |
| </head> |
| <body> |
| <div id="chartdiv"></div> |
| |
| <script> |
| am5.ready(function() { |
| |
| |
| |
| var root = am5.Root.new("chartdiv"); |
| |
| |
| |
| |
| root.setThemes([ |
| am5themes_Animated.new(root) |
| ]); |
| |
| |
| |
| |
| var chart = root.container.children.push(am5percent.PieChart.new(root, { |
| layout: root.verticalLayout, |
| innerRadius: am5.percent(50) |
| })); |
| |
| |
| |
| |
| var series = chart.series.push(am5percent.PieSeries.new(root, { |
| valueField: "value", |
| categoryField: "category", |
| alignLabels: false |
| })); |
| |
| series.labels.template.setAll({ |
| textType: "circular", |
| centerX: 0, |
| centerY: 0 |
| }); |
| |
| |
| |
| |
| series.data.setAll([ |
| { value: 10, category: "One" }, |
| { value: 9, category: "Two" }, |
| { value: 6, category: "Three" }, |
| { value: 5, category: "Four" }, |
| { value: 4, category: "Five" }, |
| { value: 3, category: "Six" }, |
| { value: 1, category: "Seven" }, |
| ]); |
| |
| |
| |
| |
| var legend = chart.children.push(am5.Legend.new(root, { |
| centerX: am5.percent(50), |
| x: am5.percent(50), |
| marginTop: 15, |
| marginBottom: 15, |
| })); |
| |
| legend.data.setAll(series.dataItems); |
| |
| |
| |
| series.appear(1000, 100); |
| |
| }); |
| </script> |
| </body> |
| </html> |
点击查看详情

案例4
| <!DOCTYPE html> |
| <html> |
| <head> |
| <script src="https://cdn.amcharts.com/lib/5/index.js"></script> |
| <script src="https://cdn.amcharts.com/lib/5/percent.js"></script> |
| <script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script> |
| <style> |
| #chartdiv { |
| width: 650PX; |
| height: 350px; |
| } |
| </style> |
| </head> |
| <body> |
| <div id="chartdiv"></div> |
| |
| <script> |
| am5.ready(function() { |
| |
| |
| |
| var root = am5.Root.new("chartdiv"); |
| |
| |
| |
| root.setThemes([ |
| am5themes_Animated.new(root) |
| ]); |
| |
| |
| |
| |
| var chart = root.container.children.push(am5percent.PieChart.new(root, { |
| layout: root.verticalLayout, |
| innerRadius: am5.percent(40) |
| })); |
| |
| |
| |
| |
| var series0 = chart.series.push(am5percent.PieSeries.new(root, { |
| valueField: "bottles", |
| categoryField: "country", |
| alignLabels: false |
| })); |
| |
| var bgColor = root.interfaceColors.get("background"); |
| |
| series0.ticks.template.setAll({ forceHidden: true }); |
| series0.labels.template.setAll({ forceHidden: true }); |
| series0.slices.template.setAll({ |
| stroke: bgColor, |
| strokeWidth: 2, |
| tooltipText: |
| "{category}: {valuePercentTotal.formatNumber('0.00')}% ({value} bottles)" |
| }); |
| series0.slices.template.states.create("hover", { scale: 0.95 }); |
| |
| var series1 = chart.series.push(am5percent.PieSeries.new(root, { |
| valueField: "litres", |
| categoryField: "country", |
| alignLabels: true |
| })); |
| |
| series1.slices.template.setAll({ |
| stroke: bgColor, |
| strokeWidth: 2, |
| tooltipText: |
| "{category}: {valuePercentTotal.formatNumber('0.00')}% ({value} litres)" |
| }); |
| |
| var data = [{ |
| country: "Lithuania", |
| litres: 501.9, |
| bottles: 1500 |
| }, { |
| country: "Czech Republic", |
| litres: 301.9, |
| bottles: 990 |
| }, { |
| country: "Ireland", |
| litres: 201.1, |
| bottles: 785 |
| }, { |
| country: "Germany", |
| litres: 165.8, |
| bottles: 255 |
| }, { |
| country: "Australia", |
| litres: 139.9, |
| bottles: 452 |
| }, { |
| country: "Austria", |
| litres: 128.3, |
| bottles: 332 |
| }, { |
| country: "UK", |
| litres: 99, |
| bottles: 150 |
| }, { |
| country: "Belgium", |
| litres: 60, |
| bottles: 178 |
| }, { |
| country: "The Netherlands", |
| litres: 50, |
| bottles: 50 |
| }]; |
| |
| |
| |
| series0.data.setAll(data); |
| series1.data.setAll(data); |
| |
| |
| |
| series0.appear(1000, 100); |
| series1.appear(1000, 100); |
| |
| }); |
| </script> |
| </body> |
| </html> |
点击查看详情

【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步