Crosshair 十字准星

中文译为十字准星，用于标注图表中的点，并添加文字标签。不同的坐标系下，十字准星的表现形式会有所不同。在 VChart 中，crosshair 默认关闭，用户可以通过 crosshair 配置项开启。本教程主要讲解 crosshair 的相关概念以及组成，关于 crosshair 更加详细的配置及示例，详见配置项文档及示例页面。

组成

Crosshair 通过展示一条连接数据点和坐标轴的线来标注数据点，另外也可以在线上标注文本标签来展示数据点的具体数值。

在直角坐标系下，crosshair 由一组垂直水平线或矩形框组成，如下图所示：

在极坐标系下，crosshair 以一组圆弧线、射线或者扇形组成，用于标注鼠标所在位置的数据点。半径轴上的十字准星由一组圆弧线组成，角度轴上的十字准星由一组射线或者扇形，如下图所示：

配置

在 VChart 中，crosshair 的配置项是关联轴字段的，根据坐标系的不同而有所差异，下面我们将分介绍不同坐标系下的十字准星配置和使用。

• 直角坐标系下，crosshair 的配置项如下:

 {
    "crosshair": {
      "xField": {
        "visible": true,
        "label": {
          "visible": false
        }
      },
      "yField": {
        "visible": false
      }
    }
  }

• 极坐标系下，crosshair 的配置项如下，我们需要关联 category 字段和 value 字段：

{
  "crosshair": {
    "categoryField": {
      "visible": true,
      "label": {
        "visible": false
      }
    },
    "valueField": {
      "visible": false
    }
  }
}

下面我们将分介绍不同坐标系下的十字准星配置和使用。

示例

直角坐标系

在直角坐标系下，十字准星以一组垂直水平线相交的形式展现，用于标注鼠标所在位置的数据点。示例如下：

极坐标系

在极坐标系下，十字准星以一组圆弧线、射线或者扇形组成，用于标注鼠标所在位置的数据点。半径轴上的十字准星由一组圆弧线组成，角度轴上的十字准星由一组射线或者扇形组成。示例如下：

多 region 关联

当存在多个 region 时，我们可以通过配置 bindingAxesIndex 属性，将 crosshair 绑定到指定的坐标轴上来实现贯穿多个 region 区域的长标注线。

通过以上示例，用户应能握 VChart 中十字准星配置及使用方法。在实际应用中，还可以根据需求对十字准星样式、标签等进行定制，进一步提升图表的表现力。