更新图例文本

尝试一下在线预览

此示例显示如何通过渲染器的属性和创作信息更改图例的文本。无论您是创建 UniqueValueRendererClassBreaksRenderer 还是带有可视变量的 SimpleRenderer,图例中显示的文本始终在渲染器中处理。

此示例中的图层是使用关系渲染器渲染的,也称为双变量等值线可视化,它将两个数值变量沿单独的色带分类为 2、3 或 4 类。其中一个坡道旋转 90 度并覆盖在另一个上以创建 2x2、3x3 或 4x4 方形网格。x 轴表示一个变量的取值范围,y 轴表示第二个变量的取值范围。从左下角到右上角的对角线正方形表示两个变量可能相关或相互一致的要素。

右下角和左上角表示一个字段具有高值而另一字段具有低值的要素,反之亦然。

请记住,即使您观察到两个感兴趣的变量之间存在正相关关系,也并不意味着它们在统计上是相关的。这也不意味着一个变量的存在会影响另一个变量。因此,应该明智地使用此渲染器,并了解两个变量可能相关的先验知识。

这个特定的可视化使用 2x2 网格来显示投票给挑战者的选民百分比与失业率之间的潜在关系。下图描述了每个变量中两个类之间的断点。

relationship-legend-numbers

虽然这些数字很有用,并提供了上下文,但可能更希望用简单的文本来描述图例的每个角落,因为一些地图阅读者可能不知道特定变量的 high 或 low范围。因此,根据受众的不同,提供切换图例标签的选项可能很有用。

relationship-legend-text

从技术上讲,关系渲染器是由 Arcade 表达式返回的值驱动的 UniqueValueRenderer 实例。 因此,您可以通过更改每个 uniqueValueInfo 对象中的 label 属性来更改图例文本。当用户选择显示数字的选项时,我们将使用每个类的最小值和最大值来标记图例的轴。图层的 authoringInfo 属性为我们提供了该信息。

relationship-legend-authoringinfo

下面片段中的函数使用 authoringInfo 中的信息来显示每个变量的范围,而不是描述性文本。如果需要描述性文本,则将文本交换为有利于数字。

                                  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
function changeRendererLabels(renderer, showDescriptiveLabels) {
  const numClasses = renderer.authoringInfo.numClasses;
  const field1max = renderer.authoringInfo.field1.classBreakInfos[numClasses - 1].maxValue;
  const field2max = renderer.authoringInfo.field2.classBreakInfos[numClasses - 1].maxValue;

  renderer.uniqueValueInfos.forEach((info) => {
    switch (info.value) {
      case "HH":
        info.label = showDescriptiveLabels ? "Majority voted for challenger; fewer jobs" : "";
        break;
      case "HL":
        info.label = showDescriptiveLabels
          ? "Majority voted for challenger; more jobs"
          : Math.round(field1max) + "%";
        break;
      case "LH":
        info.label = showDescriptiveLabels
          ? "Majority voted for incumbent; fewer jobs"
          : Math.round(field2max) + "%";
        break;
      case "LL":
        info.label = showDescriptiveLabels ? "Majority voted for incumbent; more jobs" : 0;
        break;
    }
  });

  // When a focus is specified, the legend renders as a diamond with the
  // indicated focus value on the top. If no value is specified, then
  // the legend renders as a square

  renderer.authoringInfo.focus = showDescriptiveLabels ? "HH" : null;

  return renderer;
}

另请注意,您可以通过修改图层中 authoringInfo 的 focus 属性的值来更改图例的旋转。

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.