首页 > 其他分享 >amCharts绘制饼图

amCharts绘制饼图

时间:2024-05-30 15:56:16浏览次数:20  
标签:category 绘制 charts value chart amCharts series root

案例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: 650PX;
          height: 280px;
        }
    </style>
  </head>
  <body>
    <div id="chartdiv"></div>
    
    <script>
        am5.ready(function() {
        
        // Create root element
        // https://www.amcharts.com/docs/v5/getting-started/#Root_element
        var root = am5.Root.new("chartdiv");
        
        // Set themes
        // https://www.amcharts.com/docs/v5/concepts/themes/
        root.setThemes([
          am5themes_Animated.new(root)
        ]);
        
        // Create chart
        // https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/
        var chart = root.container.children.push(
          am5percent.PieChart.new(root, {
            endAngle: 270
          })
        );
        
        // Create series
        // https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/#Series
        var series = chart.series.push(
          am5percent.PieSeries.new(root, {
            valueField: "value",
            categoryField: "category",
            endAngle: 270
          })
        );
        
        series.states.create("hidden", {
          endAngle: -90
        });
        
        // Set data
        // https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/#Setting_data
        series.data.setAll([{
          category: "Lithuania",
          value: 501.9
        }, {
          category: "Czechia",
          value: 301.9
        }, {
          category: "Ireland",
          value: 201.1
        }, {
          category: "Germany",
          value: 165.8
        }, {
          category: "Australia",
          value: 139.9
        }, {
          category: "Austria",
          value: 128.3
        }, {
          category: "UK",
          value: 99
        }]);
        
        series.appear(1000, 100);
        
        }); // end am5.ready()
    </script>        
  </body>
</html>
  • 效果图
点击查看详情

标签:category,绘制,charts,value,chart,amCharts,series,root
From: https://www.cnblogs.com/dogleftover/p/18222544

相关文章

  • amCharts绘制带趋势线折线图
    代码案例<!DOCTYPEhtml><html><head><scriptsrc="https://cdn.amcharts.com/lib/5/index.js"></script><scriptsrc="https://cdn.amcharts.com/lib/5/xy.js"></script><scriptsrc=&qu......
  • amCharts绘制折线图尾部动画
    代码案例<!DOCTYPEhtml><html><head><scriptsrc="https://cdn.amcharts.com/lib/5/index.js"></script><scriptsrc="https://cdn.amcharts.com/lib/5/xy.js"></script><scriptsrc=&qu......
  • amCharts绘制折线图和柱状图混合
    代码案例<!DOCTYPEhtml><html><head><scriptsrc="https://cdn.amcharts.com/lib/5/index.js"></script><scriptsrc="https://cdn.amcharts.com/lib/5/xy.js"></script><scriptsrc=&qu......
  • amCharts绘制堆叠面积图
    代码案例<!DOCTYPEhtml><html><head><scriptsrc="https://cdn.amcharts.com/lib/5/index.js"></script><scriptsrc="https://cdn.amcharts.com/lib/5/xy.js"></script><scriptsrc=&qu......
  • amCharts绘制折线图比较
    代码案例<!DOCTYPEhtml><html><head><scriptsrc="https://cdn.amcharts.com/lib/5/index.js"></script><scriptsrc="https://cdn.amcharts.com/lib/5/xy.js"></script><scriptsrc=&qu......
  • 地质灾害风险地图:如何用GIS与Python绘制
    地质灾害是指全球地壳自然地质演化过程中,由于地球内动力、外动力或者人为地质动力作用下导致的自然地质和人类的自然灾害突发事件。由于降水、地震等自然作用下,地质灾害在世界范围内频繁发生。我国除滑坡灾害外,还包括崩塌、泥石流、地面沉降等各种地质灾害,具有类型多样、分......
  • Highcharts绘制饼图
    代码案例<html> <head> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"> <metaname="viewport"content="width=device-width,initial-scale=1"> <title>HighchartsExa......
  • AnyChart绘制折线图
    代码案例<html><head><scriptsrc="https://cdn.anychart.com/releases/v8/js/anychart-base.min.js"></script><scriptsrc="https://cdn.anychart.com/releases/v8/js/anychart-ui.min.js"></script......
  • 使用python绘制一个五颜六色的爱心
    使用python绘制一个五颜六色的爱心介绍效果代码介绍使用numpy与matplotlib绘制一个七彩爱心!效果代码importnumpyasnpimportmatplotlib.pyplotasplt#Heartshapefunctiondefheart_shape(t):x=16*np.sin(t)**3y=13*np.cos(t)-5*......
  • 统计不同文件夹中的文件数量,并绘制相应的柱状图。
    一、数据类型每个文件夹下都是这种文件,虽然可以通过手动数出来了解文件数量,但为了更直观地看到每个文件夹的文件数量,可以使用图表来表示,这样会更加清晰。效果展示:  二、代码实现 importosimportmatplotlib.pyplotaspltfolder_names=['0','1','2','3']......