如何根据颜色范围更改列表项的颜色

Question

我正在开发美国融合地图。它将包含各州以及其他领土。

对于其他区域，我将它们显示为值列表，其中每个区域旁边都有一个彩色框（这基本上是其要点）。

我现在想做的是根据其数据更改项目符号点的颜色（例如，关岛是红色），以匹配与美国地图其他部分相同的颜色范围。所以关岛实际上应该是蓝色的，而不是红色的，因为它的平均温度接近 80 华氏度。

做到这一点的最佳方法是什么？这是代码https://jsfiddle.net/qgLhk5bc/

如果您想重新创建地图来尝试，您将需要这些库

npm i fusioncharts react-fusioncharts fusionmaps @material-ui @mui

您可以创建一个基本的 React 应用程序并将代码从 jsfiddle 复制到“app.js”

npx create-react-app

Answer 1

请在此处查看图例配置选项：https://www.fusioncharts.com/dev/chart-guide/chart-configurations/legend。 有一个

color

属性。

Answer 2

使用渐变比例，您可以指定与特定数据点关联的颜色。这定义了整个数据范围的自动梯度比例。根据梯度刻度上的数据值位置，实体以独特的颜色显示。

{
        "chart": {
            "caption": "Global Population Density",
            "theme": "fusion",
            "showLabels": "1",
            "formatNumberScale": "0"
        },
        "colorrange": {
            "minvalue": "0",
            "startlabel": "Low",
            "endlabel": "High",
            "code": "#FF4411",
            "gradient": "1",
            "color": [{
                "maxvalue": "25",
                "code": "#FFDD44",
                "displayValue": "Median"
            }, {
                "maxvalue": "100",
                "code": "#6baa01"
            }]
        },
        "data": [{
            "id": "NA",
            "value": "22.1",
            "showLabel": "1",
            "displayValue": "Moderate"
        },
        {
            "id": "SA",
            "value": "22.0",
            "showLabel": "1",
            "displayValue": "Moderate"
        },
        {
            "id": "AS",
            "value": "95.0",
            "showLabel": "1",
            "displayValue": "Dense"
        },
        {
            "id": "EU",
            "value": "72.5",
            "showLabel": "1",
            "displayValue": "Dense"
        },
        {
            "id": "AF",
            "value": "33.7",
            "showLabel": "1",
            "displayValue": "Moderate"
        },
        {
            "id": "AU",
            "value": "3.2",
            "showLabel": "1",
            "displayValue": "Sparse"
        }]
    }

要了解有关此功能的更多信息，请参阅 - https://www.fusioncharts.com/dev/map-guide/colouring-based-on-data-range

https://www.fusioncharts.com/dev/chart-guide/chart-configurations/legend