图表

字数统计: 1k 字
阅读时长: 约 2 分钟
当前版本: 4.29

以饼图样式显示的按人口普查区划分的受教育程度

什么是图表样式？ ​

图表样式是将图层中每个要素的两个或多个数字属性可视化为图表。可以使用此样式来可视化具有子类别的任何变量，例如：每位候选人在选举中获得的选票数、种族和民族。

图表样式的工作原理 ​

饼图样式使用 PieChartRenderer 配置。目前，这是唯一可用的基于图表的渲染器。饼图渲染器需要一个属性列表 (至少两个)，定义饼图配置，设置字段或Arcade 表达式返回结果对应的颜色值。

js
    const colors = ["#00b6f1", "#d9bf0d", "#c44245", "#6a28c7"];
    const renderer = {
        type: "pie-chart",
        othersCategory: {
            threshold: 0.05,
            color: "gray"
        },
        attributes: [{
            field: "GRADDEG_CY",
            label: "Master's degree or higher",
            color: colors[0]
        }, {
            valueExpression: "$feature.ASSCDEG_CY + $feature.BACHDEG_CY",
            label: "Undergraduate degree",
            color: colors[1]
        }, {
            valueExpression: "$feature.HSGRAD_CY + $feature.GED_CY + $feature.SMCOLL_CY",
            label: "High school degree",
            color: colors[2]
        }, {
            valueExpression: "$feature.NOHS_CY + $feature.SOMEHS_CY",
            label: "No high school",
            color: colors[3]
        }],
        size: 18
    };

生成的渲染器将使用每个属性的颜色来创建一个与字段或表达式返回的值成比例的扇区。othersCategory 定义了一种颜色，用于对小于给定阈值的楔块进行着色。这有助于显示那些太小而无法阅读的扇区。

注：由于人眼很难感知面积差异，因此应谨慎使用饼图。它们在可视化多样性和一般模式时很有用，但在可视化最常见的类别时用处不大。

示例 ​

饼图 ​

以下示例演示了如何创建饼图样式，其中所有图表都具有一致的大小。通常，我们要尽量避免创建重叠的图表。本例中使用的大小适用于初始视图比例，但在其他比例中效果较差。因此，实际应用中需要注意适配性，放大到大比例时制作更大的图表，缩小到小比例时制作更小的图表。

js
    const colors = ["#00b6f1", "#d9bf0d", "#c44245", "#6a28c7"];
    const renderer = {
        type: "pie-chart",
        othersCategory: {
            threshold: 0.05,
            color: "gray"
        },
        attributes: [{
            field: "GRADDEG_CY",
            label: "Master's degree or higher",
            color: colors[0]
        }, {
            valueExpression: "$feature.ASSCDEG_CY + $feature.BACHDEG_CY",
            label: "Undergraduate degree",
            color: colors[1]
        }, {
            valueExpression: "$feature.HSGRAD_CY + $feature.GED_CY + $feature.SMCOLL_CY",
            label: "High school degree",
            color: colors[2]
        }, {
            valueExpression: "$feature.NOHS_CY + $feature.SOMEHS_CY",
            label: "No high school",
            color: colors[3]
        }],
        size: 18
    };

饼图的大小 ​

如果通过饼图大小再来表示类别的总和会提供更多有用信息。饼图如果代表的是非常小的群体，用大小表示可能并不明显。但是，对于群体众多的地区在适当大小情况下会变得更加突出。 我们使用 Arcade 表达式创建一个大小变量来更改饼图，该表达式返回饼图属性中所有类别的总和。

js
    renderer.visualVariables = [{
        type: "size",
        valueExpression: `
        var all = [
            $feature.NOHS_CY, $feature.SOMEHS_CY, $feature.HSGRAD_CY,
            $feature.GED_CY, $feature.SMCOLL_CY, $feature.ASSCDEG_CY,
            $feature.BACHDEG_CY, $feature.GRADDEG_CY
        ];
        var total = Sum(all);
        return total;
        `,
        valueExpressionTitle: "Population 25+",
        minSize: "2px",
        maxSize: "48px",
        minDataValue: 1000,
        maxDataValue: 15000
    }];

圆环图 ​

有些人更喜欢用圆环形状来表示饼图。通过设置 PieChartRenderer 的 holePercentage 属性可以轻松配置。值为零表示没有孔洞 (即饼图)，任何大于零的值都会按饼图的固定百分比创建一个孔。例如，holePercentage 为 0.5 将删除饼图的 50%。

这可以使饼图看起来更现代，并在需要时提供放置数字标注的空间。

注意：圆环图不应该重叠，因为这使得重叠要素的类别几乎无法区分。

js
    const colors = ["#00b6f1", "#d9bf0d", "#c44245", "#6a28c7"];
    const renderer = {
        type: "pie-chart",

        holePercentage: 0.5,

        othersCategory: {
            threshold: 0.05,
            color: "gray"
        },
        attributes: [{
            field: "GRADDEG_CY",
            label: "Master's degree or higher",
            color: colors[0]
        }, {
            valueExpression: "$feature.ASSCDEG_CY + $feature.BACHDEG_CY",
            label: "Undergraduate degree",
            color: colors[1]
        }, {
            valueExpression: "$feature.HSGRAD_CY + $feature.GED_CY + $feature.SMCOLL_CY",
            label: "High school degree",
            color: colors[2]
        }, {
            valueExpression: "$feature.NOHS_CY + $feature.SOMEHS_CY",
            label: "No high school",
            color: colors[3]
        }],
        size: 18
    };