amcharts4带有动画点击效果的折线图效果
代码语言:html
所属分类:图表
代码描述:amcharts4带有动画点击效果的折线图效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; } #chartdiv { width: 100%; height: 500px; } </style> </head> <body translate="no"> <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/themes/animated.js"></script> <div id="chartdiv"></div> <script> /** * --------------------------------------- * This demo was created using amCharts 4. * * For more information visit: * https://www.amcharts.com/ * * Documentation is available at: * https://www.amcharts.com/docs/v4/ * --------------------------------------- */ // Themes begin am4core.useTheme(am4themes_animated); // Themes end var chart = am4core.create("chartdiv", am4charts.XYChart); chart.hiddenState.properties.opacity = 0; // this makes initial fade in effect chart.data = [{ "country": "One", "value": 3025 }, { "country": "Two", "value": 1882 }, { "country": "Three", "value": 1809 }, { "country": "Four", "value": 1322 }, { "country": "Five", "value": 1122 }, { .........完整代码请登录后点击上方下载按钮下载查看
网友评论0