当前位置: 首页 > 编程笔记 >

android LabelView实现标签云效果

范高刚
2023-03-14
本文向大家介绍android LabelView实现标签云效果,包括了android LabelView实现标签云效果的使用技巧和注意事项,需要的朋友参考一下

今天我们来做一个android上的标签云效果, 虽然还不是很完美,但是已经足够可以展现标签云的效果了,首先来看看效果吧。

额,录屏只能录到这个份上了,凑活着看吧。今天我们就来实现一下这个效果, 这次我选择直接继承view来, 什么? 这样的效果不是SurfaceView擅长的吗? 为什么要view,其实都可以了, 我选择view,是因为:额,我对SurfaceView还不是很熟悉。

废话少说, 下面开始上代码

public class LabelView extends View { 
 private static final int DIRECTION_LEFT = 0; // 向左 
 private static final int DIRECTION_RIGHT = 1; // 向右 
 private static final int DIRECITON_TOP = 2; // 向上 
 private static final int DIRECTION_BOTTOM = 3; // 向下 
  
 private boolean isStatic; // 是否静止, 默认false, 可用干xml : label:is_static="false" 
  
 private int[][] mLocations; // 每个label的位置 x/y 
 private int[][] mDirections; // 每个label的方向 x/y 
 private int[][] mSpeeds; // 每个label的x/y速度 x/y 
 private int[][] mTextWidthAndHeight; // 每个labeltext的大小 width/height 
  
 private String[] mLabels; // 设置的labels 
 private int[] mFontSizes; // 每个label的字体大小 
 // 默认配色方案 
 private int[] mColorSchema = {0XFFFF0000, 0XFF00FF00, 0XFF0000FF, 0XFFCCCCCC, 0XFFFFFFFF}; 
  
 private int mTouchSlop; // 最小touch 
 private int mDownX = -1; 
 private int mDownY = -1; 
 private int mDownIndex = -1; // 点击的index 
  
 private Paint mPaint; 
  
 private Thread mThread; 
  
 private OnItemClickListener mListener; // item点击事件 
  
 public LabelView(Context context, AttributeSet attrs) { 
  this(context, attrs, 0); 
 } 
 
 public LabelView(Context context, AttributeSet attrs, int defStyleAttr) { 
  super(context, attrs, defStyleAttr); 
   
  TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.LabelView, defStyleAttr, 0); 
  isStatic = ta.getBoolean(R.styleable.LabelView_is_static, false); 
  ta.recycle(); 
   
  mTouchSlop = ViewConfiguration.get(context).getScaledTouchSlop(); 
   
  mPaint = new Paint(); 
  mPaint.setAntiAlias(true); 
 } 
  
 @Override 
 protected void onLayout(boolean changed, int left, int top, int right, 
   int bottom) { 
  super.onLayout(changed, left, top, right, bottom); 
  init(); 
 } 
  
 @Override 
 protected void onDraw(Canvas canvas) { 
  if(!hasContents()) { 
   return; 
  } 
   
  for (int i = 0; i < mLabels.length; i++) { 
   mPaint.setTextSize(mFontSizes[i]); 
    
   if(i < mColorSchema.length) mPaint.setColor(mColorSchema[i]); 
   else mPaint.setColor(mColorSchema[i-mColorSchema.length]); 
    
   canvas.drawText(mLabels[i], mLocations[i][0], mLocations[i][1], mPaint); 
  } 
 } 
  
 @Override 
 public boolean onTouchEvent(MotionEvent ev) { 
  switch (ev.getAction()) { 
  case MotionEvent.ACTION_DOWN: 
   mDownX = (int) ev.getX(); 
   mDownY = (int) ev.getY(); 
   mDownIndex = getClickIndex(); 
   break; 
  case MotionEvent.ACTION_UP: 
   int nowX = (int) ev.getX(); 
   int nowY = (int) ev.getY(); 
   if (nowX - mDownX < mTouchSlop && nowY - mDownY < mTouchSlop 
     && mDownIndex != -1 && mListener != null) { 
    mListener.onItemClick(mDownIndex, mLabels[mDownIndex]); 
   } 
    
   mDownX = mDownY = mDownIndex = -1; 
   break; 
  } 
   
  return true; 
 } 
  
 /** 
  * 获取当前点击的label的位置 
  * @return label的位置,没有点中返回-1 
  */ 
 private int getClickIndex() { 
  Rect downRect = new Rect(); 
  Rect locationRect = new Rect(); 
  for(int i=0;i<mLocations.length;i++) { 
   downRect.set(mDownX - mTextWidthAndHeight[i][0], mDownY 
     - mTextWidthAndHeight[i][1], mDownX 
     + mTextWidthAndHeight[i][0], mDownY 
     + mTextWidthAndHeight[i][1]); 
    
   locationRect.set(mLocations[i][0], mLocations[i][1], 
     mLocations[i][0] + mTextWidthAndHeight[i][0], 
     mLocations[i][1] + mTextWidthAndHeight[i][1]); 
    
   if(locationRect.intersect(downRect)) { 
    return i; 
   } 
  } 
  return -1; 
 } 
  
 /** 
  * 开启子线程不断刷新位置并postInvalidate 
  */ 
 private void run() { 
  if(mThread != null && mThread.isAlive()) { 
   return; 
  } 
   
  mThread = new Thread(mStartRunning); 
  mThread.start(); 
 } 
  
 private Runnable mStartRunning = new Runnable() { 
  @Override 
  public void run() { 
   for(;;) { 
    SystemClock.sleep(100); 
     
    for (int i = 0; i < mLabels.length; i++) { 
     if (mLocations[i][0] <= getPaddingLeft()) { 
      mDirections[i][0] = DIRECTION_RIGHT; 
     } 
      
     if (mLocations[i][0] >= getMeasuredWidth() 
       - getPaddingRight() - mTextWidthAndHeight[i][0]) { 
      mDirections[i][0] = DIRECTION_LEFT; 
     } 
      
     if(mLocations[i][1] <= getPaddingTop() + mTextWidthAndHeight[i][1]) { 
      mDirections[i][1] = DIRECTION_BOTTOM; 
     } 
      
     if (mLocations[i][1] >= getMeasuredHeight() - getPaddingBottom()) { 
      mDirections[i][1] = DIRECITON_TOP; 
     } 
      
     int xSpeed = 1; 
     int ySpeed = 2; 
      
     if(i < mSpeeds.length) { 
      xSpeed = mSpeeds[i][0]; 
      ySpeed = mSpeeds[i][1]; 
     } 
     else { 
      xSpeed = mSpeeds[i-mSpeeds.length][0]; 
      ySpeed = mSpeeds[i-mSpeeds.length][1]; 
     } 
      
     mLocations[i][0] += mDirections[i][0] == DIRECTION_RIGHT ? xSpeed : -xSpeed; 
     mLocations[i][1] += mDirections[i][1] == DIRECTION_BOTTOM ? ySpeed : -ySpeed; 
    } 
     
    postInvalidate(); 
   } 
  } 
 }; 
  
 /** 
  * 初始化位置、方向、label宽高 
  * 并开启线程 
  */ 
 private void init() { 
  if(!hasContents()) { 
   return; 
  } 
   
  int minX = getPaddingLeft(); 
  int minY = getPaddingTop(); 
  int maxX = getMeasuredWidth() - getPaddingRight(); 
  int maxY = getMeasuredHeight() - getPaddingBottom(); 
   
  Rect textBounds = new Rect(); 
   
  for (int i = 0; i < mLabels.length; i++) { 
   int[] location = new int[2]; 
   location[0] = minX + (int) (Math.random() * maxX); 
   location[1] = minY + (int) (Math.random() * maxY); 
    
   mLocations[i] = location; 
   mFontSizes[i] = 15 + (int) (Math.random() * 30); 
   mDirections[i][0] = Math.random() > 0.5 ? DIRECTION_RIGHT : DIRECTION_LEFT; 
   mDirections[i][1] = Math.random() > 0.5 ? DIRECTION_BOTTOM : DIRECITON_TOP; 
    
   mPaint.setTextSize(mFontSizes[i]); 
   mPaint.getTextBounds(mLabels[i], 0, mLabels[i].length(), textBounds); 
   mTextWidthAndHeight[i][0] = textBounds.width(); 
   mTextWidthAndHeight[i][1] = textBounds.height(); 
  } 
   
  if(!isStatic) run(); 
 } 
  
 /** 
  * 是否设置label 
  * @return true or false 
  */ 
 private boolean hasContents() { 
  return mLabels != null && mLabels.length > 0; 
 } 
 
 /** 
  * 设置labels 
  * @see setLabels(String[] labels) 
  * @param labels 
  */ 
 public void setLabels(List<String> labels) { 
  setLabels((String[]) labels.toArray()); 
 } 
  
 /** 
  * 设置labels 
  * @param labels 
  */ 
 public void setLabels(String[] labels) { 
  mLabels = labels; 
  mLocations = new int[labels.length][2]; 
  mFontSizes = new int[labels.length]; 
  mDirections = new int[labels.length][2]; 
  mTextWidthAndHeight = new int[labels.length][2]; 
   
  mSpeeds = new int[labels.length][2]; 
  for(int speed[] : mSpeeds) { 
   speed[0] = speed[1] = 1; 
  } 
   
  requestLayout(); 
 } 
  
 /** 
  * 设置配色方案 
  * @param colorSchema 
  */ 
 public void setColorSchema(int[] colorSchema) { 
  mColorSchema = colorSchema; 
 } 
  
 /** 
  * 设置每个item的x/y速度 
  * <p> 
  * speeds.length > labels.length 忽略多余的 
  * <p> 
  * speeds.length < labels.length 将重复使用 
  * 
  * @param speeds 
  */ 
 public void setSpeeds(int[][] speeds) { 
  mSpeeds = speeds; 
 } 
  
 /** 
  * 设置item点击的监听事件 
  * @param l 
  */ 
 public void setOnItemClickListener(OnItemClickListener l) { 
  getParent().requestDisallowInterceptTouchEvent(true); 
  mListener = l; 
 } 
  
 /** 
  * item的点击监听事件 
  */ 
 public interface OnItemClickListener { 
  public void onItemClick(int index, String label); 
 } 
} 

上来先弄了4个常量上去,干嘛用的呢? 是要判断每个item的方向的,因为当达到某个边界的时候,item要向相反的方向移动。

第二个构造方法中, 获取了一个自定义属性,还有就是初始化的Paint。

继续看onLayout, 其实onLayout我们什么都没干,只是调用了init方法, 来看看init方法。

/** 
 * 初始化位置、方向、label宽高 
 * 并开启线程 
 */ 
private void init() { 
 if(!hasContents()) { 
  return; 
 } 
   
 int minX = getPaddingLeft(); 
 int minY = getPaddingTop(); 
 int maxX = getMeasuredWidth() - getPaddingRight(); 
 int maxY = getMeasuredHeight() - getPaddingBottom(); 
   
 Rect textBounds = new Rect(); 
   
 for (int i = 0; i < mLabels.length; i++) { 
  int[] location = new int[2]; 
  location[0] = minX + (int) (Math.random() * maxX); 
  location[1] = minY + (int) (Math.random() * maxY); 
    
  mLocations[i] = location; 
  mFontSizes[i] = 15 + (int) (Math.random() * 30); 
  mDirections[i][0] = Math.random() > 0.5 ? DIRECTION_RIGHT : DIRECTION_LEFT; 
  mDirections[i][1] = Math.random() > 0.5 ? DIRECTION_BOTTOM : DIRECITON_TOP; 
    
  mPaint.setTextSize(mFontSizes[i]); 
  mPaint.getTextBounds(mLabels[i], 0, mLabels[i].length(), textBounds); 
  mTextWidthAndHeight[i][0] = textBounds.width(); 
  mTextWidthAndHeight[i][1] = textBounds.height(); 
 } 
   
 if(!isStatic) run(); 
} 

init方法中,上来先判断一下,是否设置了标签,如果没有设置直接返回,省得事多。
10~13行,目的就是获取item在该view中移动的上下左右边界,毕竟item还是要在整个view中移动的嘛,不能超出了view的边界。

17行,开始一个for循环,去遍历所有的标签。

18~20行,是随机初始化一个位置,所以,我们的标签每次出现的位置都是随机的,并没有什么规律,但接下来的移动是有规律的,总不能到处乱蹦吧。

接着,22行,保存了这个位置,因为我们下面要不断的去修改这个位置。

23行,随机了一个字体大小,24、25行,随机了该标签x/y初始的方向。

27行,去设置了当前标签的字体大小,28行,是获取标签的宽度和高度,并在下面保存在了一个二维数组中,为什么是二维数组,我们有多个标签嘛, 每个标签都要保存它的宽度和高度。

最后,如果我们没有显示的声明labelview是静止的,则去调用run方法。

继续跟进代码,看看run方法的内脏。

/** 
 * 开启子线程不断刷新位置并postInvalidate 
 */ 
private void run() { 
 if(mThread != null && mThread.isAlive()) { 
  return; 
 } 
  
 mThread = new Thread(mStartRunning); 
 mThread.start(); 
} 

5~7行,如果线程已经开启,直接return 防止多个线程共存,这样造成的后果就是标签越来越快。
9、10行,去启动一个线程,并有一个mStartRunning的Runnable参数。

那么我们继续来看看这个Runnable。

private Runnable mStartRunning = new Runnable() { 
 @Override 
 public void run() { 
  for(;;) { 
   SystemClock.sleep(100); 
     
   for (int i = 0; i < mLabels.length; i++) { 
    if (mLocations[i][0] <= getPaddingLeft()) { 
     mDirections[i][0] = DIRECTION_RIGHT; 
    } 
      
    if (mLocations[i][0] >= getMeasuredWidth() 
      - getPaddingRight() - mTextWidthAndHeight[i][0]) { 
     mDirections[i][0] = DIRECTION_LEFT; 
    } 
    
    if(mLocations[i][1] <= getPaddingTop() + mTextWidthAndHeight[i][1]) { 
     mDirections[i][1] = DIRECTION_BOTTOM; 
    } 
      
    if (mLocations[i][1] >= getMeasuredHeight() - getPaddingBottom()) { 
     mDirections[i][1] = DIRECITON_TOP; 
    } 
      
    int xSpeed = 1; 
    int ySpeed = 2; 
      
    if(i < mSpeeds.length) { 
     xSpeed = mSpeeds[i][0]; 
     ySpeed = mSpeeds[i][1]; 
    }else { 
     xSpeed = mSpeeds[i-mSpeeds.length][0]; 
     ySpeed = mSpeeds[i-mSpeeds.length][1]; 
    } 
      
    mLocations[i][0] += mDirections[i][0] == DIRECTION_RIGHT ? xSpeed : -xSpeed; 
    mLocations[i][1] += mDirections[i][1] == DIRECTION_BOTTOM ? ySpeed : -ySpeed; 
   } 
     
   postInvalidate(); 
  } 
 } 
}; 

这个Runnable其实才是标签云实现的关键,我们就是在这个线程中去修改每个标签的位置,并通知view去重绘的。
而且可以看到,在run中是一个死循环,这样我们的标签才能无休止的移动,接下来就是让线程去休息100ms,总不能一个劲的去移动吧,速度太快了也不好,也要考虑性能问题。

接下来第7行,去遍历所有的标签,8~23行,通过判断当前的位置是不是达到了某个边界,如果到了,则修改方向为相反的方向,例如现在到了view的最上面,那接下来,这个标签就得往下移动了。

25、26行,默认了x/y的速度,为什么是说默认了呢, 因为每个标签的x/y速度我们都可以通过方法去设置。

接下来28~34行,做了一个判断,大体意思就是:如果设置的那些速度总数大于当前标签在标签s中的位置,则去找对应位置的速度,否则,重新从前面获取速度。

36、37行就是根据x/y上的方向去修改当前标签的坐标了。

最后,调用了postInvalidate(),通知view去刷新界面,这里是用的postInvalidate()因为我们是在线程中调用的,切记。

postInvalidate()后,肯定就要走onDraw()去绘制这些标签了,那么我们就来看看onDraw吧。

@Override 
protected void onDraw(Canvas canvas) { 
 if(!hasContents()) { 
  return; 
 } 
   
 for (int i = 0; i < mLabels.length; i++) { 
  mPaint.setTextSize(mFontSizes[i]); 
    
  if(i < mColorSchema.length) mPaint.setColor(mColorSchema[i]); 
  else mPaint.setColor(mColorSchema[i-mColorSchema.length]); 
    
  canvas.drawText(mLabels[i], mLocations[i][0], mLocations[i][1], mPaint); 
 } 
} 

上来还是判断了一下,如果没有设置标签,直接返回。 如果有标签,那么去遍历所有标签,并设置对应的字体大小,还记得吗? 我们在初始化的时候随机了每个标签的字体大小,接下来去设置该标签的颜色,一个if else 原理和设置速度那个是一样的,最关键的就是下面,调用了canvas.drawText()将该标签画到屏幕上,mLocations中我们是保存了每个标签的位置,而且是在线程中不断的去修改这个位置的。
到这里,其实我们的LabelView就能动起来了,不过那几个设置标签,速度,颜色的方法还有说。其实很简单,来看一下吧。

/** 
 * 设置labels 
 * @see setLabels(String[] labels) 
 * @param labels 
 */ 
public void setLabels(List<String> labels) { 
 setLabels((String[]) labels.toArray()); 
} 
  
/** 
 * 设置labels 
 * @param labels 
 */ 
public void setLabels(String[] labels) { 
 mLabels = labels; 
 mLocations = new int[labels.length][2]; 
 mFontSizes = new int[labels.length]; 
 mDirections = new int[labels.length][2]; 
 mTextWidthAndHeight = new int[labels.length][2]; 
   
 mSpeeds = new int[labels.length][2]; 
 for(int speed[] : mSpeeds) { 
  speed[0] = speed[1] = 1; 
 } 
   
 requestLayout(); 
} 
  
/** 
 * 设置配色方案 
 * @param colorSchema 
 */ 
public void setColorSchema(int[] colorSchema) { 
 mColorSchema = colorSchema; 
} 
  
/** 
 * 设置每个item的x/y速度 
 * <p> 
 * speeds.length > labels.length 忽略多余的 
 * <p> 
 * speeds.length < labels.length 将重复使用 
 * 
 * @param speeds 
 */ 
public void setSpeeds(int[][] speeds) { 
 mSpeeds = speeds; 
} 

这几个蛋疼的方法中,唯一可说的就是setLabels(String[] labels)了,因为在这个方法中还做了点工作。 仔细观察,这方法除了设置了标签s外,其他的就是初始化了几个数组,都表示什么,相信都应该很清楚了,还有就是在这里我们初始化了默认速度为1。

刚上来做演示的时候,LabelView还能item点击,这是怎么做到的呢? 普通的onClick肯定是不行的,因为我们并不知道点击的x/y坐标,所以只能通过onTouchEvent入手了。

@Override 
public boolean onTouchEvent(MotionEvent ev) { 
 switch (ev.getAction()) { 
 case MotionEvent.ACTION_DOWN: 
  mDownX = (int) ev.getX(); 
  mDownY = (int) ev.getY(); 
  mDownIndex = getClickIndex(); 
  break; 
 case MotionEvent.ACTION_UP: 
  int nowX = (int) ev.getX(); 
  int nowY = (int) ev.getY(); 
  if (nowX - mDownX < mTouchSlop && nowY - mDownY < mTouchSlop 
    && mDownIndex != -1 && mListener != null) { 
   mListener.onItemClick(mDownIndex, mLabels[mDownIndex]); 
  } 
    
  mDownX = mDownY = mDownIndex = -1; 
  break; 
 } 
   
 return true; 
} 

在onTouch中我们只关心了down和up事件,因为一次点击就是down和up的组合嘛。
在down中,我们获取了当前事件发生的x/y坐标,并且获取了当前点击的item,当前是通过getClickIndex()方法去获取的,这个方法稍候说;再来看看up,在up中,我们通过当前的x/y和在down时的x/y对比,如果这两点的距离小于系统认为的最小滑动距离,才能说明点击有效,如果你down了以后,拉了一个长线,再up,那肯定不是一次有效的点击,当然点击有效了还不能说明一切,只有命中标签了才行,所以还去判断了mDownIndex是否为一个有效的值,然后如果设置了ItemClick,就去回调它。

那mDownIndex到底是怎么获取的呢? 我们来getClickIndex()一探究竟。

/** 
 * 获取当前点击的label的位置 
 * @return label的位置,没有点中返回-1 
 */ 
private int getClickIndex() { 
 Rect downRect = new Rect(); 
 Rect locationRect = new Rect(); 
 for(int i=0;i<mLocations.length;i++) { 
  downRect.set(mDownX - mTextWidthAndHeight[i][0], mDownY 
    - mTextWidthAndHeight[i][1], mDownX 
    + mTextWidthAndHeight[i][0], mDownY 
    + mTextWidthAndHeight[i][1]); 
    
  locationRect.set(mLocations[i][0], mLocations[i][1], 
    mLocations[i][0] + mTextWidthAndHeight[i][0], 
    mLocations[i][1] + mTextWidthAndHeight[i][1]); 
    
  if(locationRect.intersect(downRect)) { 
   return i; 
  } 
 } 
 return -1; 
} 

首先定义了两个Rect,一个是点击的rect,另一个是标签的rect,然后去遍历保存的最新的每个标签的位置,在循环中,我们通过Rect.set()方法分别设置了down的矩形的上下左右和当前标签的上下左右,然后通过Rect.intersect()方法去判断这两个矩形是否有交集,有交集就证明点击到了该标签,直接返回该标签在标签s中的位置,如果都没有返回-1表示你丫乱点!

好了,到这里,整个LabelView就弄好了,赶紧去下载源码体验一把吧,当然还不算很完美,完美的解决方案等用到它的时候再去解决,嘿嘿,反正我们已经有一个思路了。

哦,对了,还没给出源码的下载地址,看这里

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持小牛知识库。

 类似资料:
  • 本文向大家介绍js简单实现标签云效果实例,包括了js简单实现标签云效果实例的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了js简单实现标签云效果。分享给大家供大家参考。具体如下: 这里的JavaScript标签云,基于妙味课堂miaov.js文件,非常流行的网页效果,在网页的右侧或左侧开辟一小块地方,用来显示热门的标签,形式就选择标签云吧,绝对酷哦,相信你也会喜欢。 运行效果如下图所示:

  • 本文向大家介绍vue实现标签云效果的方法详解,包括了vue实现标签云效果的方法详解的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了vue实现标签云效果的方法。分享给大家供大家参考,具体如下: 闲扯两句 最近想给自己的博客上加上一个3D标签云的效果,用来表示自己博客文章的分组,网上找到了canvas实现的,还有a元素实现的解析3D标签云,我想让标签可以选择和点击,又不想在标签数量较多时操作a

  • 本文向大家介绍JavaScript实现的圆形浮动标签云效果实例,包括了JavaScript实现的圆形浮动标签云效果实例的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了JavaScript实现的圆形浮动标签云效果。分享给大家供大家参考。具体如下: 这里介绍的JS标签云效果,在鼠标的作用下会自动转动,整体上围绕成一个圆形,各个标签之间无需Div代码,直接文字+链接的形式,有多少就显示多少,Ja

  • 本文向大家介绍jQuery简单实现彩色云标签效果示例,包括了jQuery简单实现彩色云标签效果示例的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了jQuery简单实现彩色云标签效果的方法。分享给大家供大家参考,具体如下: 一、JS Code: 二、Html Code: 更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery常用插件及用法总结》、《jQuery常见经典特效汇总

  • 本文向大家介绍jQuery实现标签页效果实战(4),包括了jQuery实现标签页效果实战(4)的使用技巧和注意事项,需要的朋友参考一下 今天我们来完成《jQuery实战》系列的标签页效果。先来看一看效果图 这里有两部分的内容,上面是一个标签页的效果,下面也是一个标签页的效果。在实际应用中也经常会见到标签页的效果,它的作用主要是在页面可视区有限的情况下展示更多的内容。当用户想看其他内容的时候不需要离

  • 本文向大家介绍JS实现标签页切换效果,包括了JS实现标签页切换效果的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了JS标签页切换的具体代码,供大家参考,具体内容如下 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。

  • 标签云 标签云视图是文本数据的一种可视化表示,通常用来可视化自由形式的文本。标签一般是单独的词,每个标签的重要程度通过字体大小或颜色来表示。 每个词的字体大小,是由 指标 聚合来决定的。下列聚合可用于这个图: 指标聚合: Count 计数 聚合返回所选索引模式中元素的原始计数。 Average 该聚合返回数字字段的平均值 。从下拉菜单中选择一个字段。 Sum 总和 聚合返回数字字段的总和。从下拉菜

  • 本文向大家介绍jQuery+css实现的换页标签栏效果,包括了jQuery+css实现的换页标签栏效果的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了jQuery+css实现的换页标签栏效果。分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: 更多关于jQuery特效相关内容感兴趣的读者可查看本站专题:《jQuery常见经典特效汇总》及《jQuery动画与特效用法总结》