首页 > 其他分享 >amCharts图像分类

amCharts图像分类

时间:2024-04-26 17:55:35浏览次数:26  
标签:www root 分类 colors amcharts https 图像 com amCharts

  • 代码案例
<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdn.amcharts.com/lib/5/index.js"></script>
    <script src="https://cdn.amcharts.com/lib/5/xy.js"></script>
    <script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>
    <script src="https://cdn.amcharts.com/lib/5/themes/Responsive.js"></script>
    <style>
        #chartdiv {
          width: 1050PX;
          height: 350px;
        }
    </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/xy-chart/
      var chart = root.container.children.push(am5xy.XYChart.new(root, {
        panX: false,
        panY: false,
        wheelX: "panX",
        wheelY: "zoomX",
        paddingLeft: 0,
        layout: root.verticalLayout
      }));
      
      // Data
      var colors = chart.get("colors");
      
      var data = [{
        country: "US",
        visits: 725,
        icon: "https://www.amcharts.com/wp-content/uploads/flags/united-states.svg",
        columnSettings: { fill: colors.next() }
      }, {
        country: "UK",
        visits: 625,
        icon: "https://www.amcharts.com/wp-content/uploads/flags/united-kingdom.svg",
        columnSettings: { fill: colors.next() }
      }, {
        country: "China",
        visits: 602,
        icon: "https://www.amcharts.com/wp-content/uploads/flags/china.svg",
        columnSettings: { fill: colors.next() }
      }, {
        country: "Japan",
        visits: 509,
        icon: "https://www.amcharts.com/wp-content/uploads/flags/japan.svg",
        columnSettings: { fill: colors.next() }
      }, {
        country: "Germany",
        visits: 322,
        icon: "https://www.amcharts.com/wp-content/uploads/flags/germany.svg",
        columnSettings: { fill: colors.next() }
      }, {
        country: "France",
        visits: 214,
        icon: "https://www.amcharts.com/wp-content/uploads/flags/france.svg",
        columnSettings: { fill: colors.next() }
      }, {
        country: "India",
        visits: 204,
        icon: "https://www.amcharts.com/wp-content/uploads/flags/india.svg",
        columnSettings: { fill: colors.next() }
      }, {
        country: "Spain",
        visits: 198,
        icon: "https://www.amcharts.com/wp-content/uploads/flags/spain.svg",
        columnSettings: { fill: colors.next() }
      }, {
        country: "Netherlands",
        visits: 165,
        icon: "https://www.amcharts.com/wp-content/uploads/flags/netherlands.svg",
        columnSettings: { fill: colors.next() }
      }, {
        country: "South Korea",
        visits: 93,
        icon: "https://www.amcharts.com/wp-content/uploads/flags/south-korea.svg",
        columnSettings: { fill: colors.next() }
      }, {
        country: "Canada",
        visits: 41,
        icon: "https://www.amcharts.com/wp-content/uploads/flags/canada.svg",
        columnSettings: { fill: colors.next() }
      }];
      
      // Create axes
      // https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
      var xRenderer = am5xy.AxisRendererX.new(root, {
        minGridDistance: 30,
        minorGridEnabled: true
      })
      
      var xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root, {
        categoryField: "country",
        renderer: xRenderer,
        bullet: function (root, axis, dataItem) {
          return am5xy.AxisBullet.new(root, {
            location: 0.5,
            sprite: am5.Picture.new(root, {
              width: 24,
              height: 24,
              centerY: am5.p50,
              centerX: am5.p50,
              src: dataItem.dataContext.icon
            })
          });
        }
      }));
      
      xRenderer.grid.template.setAll({
        location: 1
      })
      
      xRenderer.labels.template.setAll({
        paddingTop: 20
      });
      
      xAxis.data.setAll(data);
      
      var yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
        renderer: am5xy.AxisRendererY.new(root, {
          strokeOpacity: 0.1
        })
      }));

      // Add series
      // https://www.amcharts.com/docs/v5/charts/xy-chart/series/
      var series = chart.series.push(am5xy.ColumnSeries.new(root, {
        xAxis: xAxis,
        yAxis: yAxis,
        valueYField: "visits",
        categoryXField: "country"
      }));
      
      series.columns.template.setAll({
        tooltipText: "{categoryX}: {valueY}",
        tooltipY: 0,
        strokeOpacity: 0,
        templateField: "columnSettings"
      });
      
      series.data.setAll(data);

      // Make stuff animate on load
      // https://www.amcharts.com/docs/v5/concepts/animations/
      series.appear();
      chart.appear(1000, 100);
      
      }); // end am5.ready()
    </script>
  </body>
</html>
  • 效果图
点击查看详情

标签:www,root,分类,colors,amcharts,https,图像,com,amCharts
From: https://www.cnblogs.com/dogleftover/p/18160586

相关文章

  • 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=......
  • openCV 图像清晰度检测
    图像清晰度评价算法有很多种,在空域中,主要思路是考察图像的领域对比度,即相邻像素间的灰度特征的梯度差;在频域中,主要思路是考察图像的频率分量,对焦清晰的图像高频分量较多,对焦模糊的图像低频分量较多。这里实现3种清晰度评价方法,分别是Tenengrad梯度方法、Laplacian梯度方法和方差......
  • 【pytorch学习】之线性神经网络-图像分类数据集
    图像分类数据集MNIST数据集(LeCunetal.,1998)是图像分类中广泛使用的数据集之一,但作为基准数据集过于简单。我们将使用类似但更复杂的Fashion‐MNIST数据集(Xiaoetal.,2017)。%matplotlibinlineimporttorchimporttorchvisionfromtorch.utilsimportdatafromt......
  • 基于FPGA的图像累积直方图verilog实现,包含tb测试文件和MATLAB辅助验证
    1.算法运行效果图预览    2.算法运行软件版本Vivado2019.2 matlab2022a 3.算法理论概述      图像累积直方图是一种重要的图像特征表示方法,它统计了图像中像素值累加分布的情况,广泛应用于图像增强、对比度调整、颜色校正、图像分割、目标检测等领域。FP......
  • 把CIFAR-10数据集分类保存成图片
    一:cifar10数据集简介CIFAR-10数据集是一个广泛用于计算机视觉领域的数据集,主要用于图像分类任务。该数据集由Hinton的学生AlexKrizhevsky和IlyaSutskever整理得到。它包含10个不同类别的RGB彩色图片,每个图片的尺寸为32×32像素。这10个类别分别是飞机(airplane)、汽车(automobil......
  • 分类算法(Classification Algorithm)需求记录
    [toc]比如说,在WEB扫描器场景中。一个扫描器在扫描过程中,它可以自动识别接口类型并采用相应分类规则进行漏洞检测的算法,这种通常属于一种称为"智能扫描"(IntelligentScanning)或"漏洞扫描引擎"的技术。这些算法利用机器学习、深度学习和模式识别等技术,通过分析网络流量、响应内容......
  • 数字图像处理案例-第16个
    condaconfig--addchannelshttps://mirrors.tuna.tsinghua.edu.cn/anaconda/pkgs/free/condaconfig--addchannelshttps://mirrors.tuna.tsinghua.edu.cn/anaconda/pkgs/main/condaconfig--addchannelshttps://mirrors.tuna.tsinghua.edu.cn/anaconda/cloud/conda-f......
  • 容器结构分类
    容器结构分类容器在内存的布局方式红黑树高度平衡二分树,树的左边和右边会自己调整高度,避免查找的时候找到某一种很长的线一直找下去set和map都有红黑树实现HashTable链表过长链表的查找要一个一个查找.链表过程会导致速度过慢设置每一个链表不能过长如果过长就会通......