javascript - 热图不清晰

Question

有人知道如何为此 map 设置颜色范围吗？值之间的差异不足以注意到颜色的变化。因此 map 上的大多数值看起来都是相同的颜色。我要么想设置自己的颜色，要么改变这些颜色的变化。

我无法找到如何在任何地方使用react的答案

import React, { Component } from 'react';
import AmCharts from "@amcharts/amcharts3-react";
import { connect } from "react-redux"
import { lookup } from 'country-data';
import * as adapter from "../Adapter.js";




class App extends Component {

    constructor(props) {
        super(props)
        this.state = {
            allCountriesHouseholdSpending: null,
            selectedCoutry: null,
            countrySpending: [{
                "id": "AU",
                "value": 4447100
            },
            {
                "id": "US",
                "value": 658188
            }]
        }
    }

    componentDidMount() {
        adapter.getAllCountriesrtyHouseholdSpending()
            .then(spendingData => this.setState({ allCountriesHouseholdSpending: spendingData }))
    }

    selectedCountrySpending = (country) => {
        let selectedCity = country.mapObject.enTitle
        if (selectedCity !== "Russia" && selectedCity !== "Venezuela" && selectedCity !== "Bolivia" && selectedCity !== "Svalbard and Jan Mayen" && selectedCity !== "Syria" && selectedCity !== "Tanzania" && selectedCity !== "Democratic Republic of Congo") {
            // console.log(lookup.countries({ name: selectedCity }));

            console.log(lookup.countries({ name: selectedCity })[0].alpha3);
            console.log('selected!', selectedCity)
            return selectedCity
        }
    }

    render() {
        const config = {
            "type": "map",
            "theme": "light",
            "colorSteps": 10,

            "dataProvider": {

                "map": "worldLow",
                "getAreasFromMap": true,
                "areas": [{
                    "id": "AU",
                    "value": 658188.6034,
                    "selected": true
                },
                {
                    "id": "AT",
                    "value": 217653.4063
                },
                {
                    "id": "BE",
                    "value": 255659.6354
                },
                {
                    "id": "CA",
                    "value": 896977.0966
                },


                ],



                valueLegend: {
                    divId: "legenddiv",

                    left: 10,
                    bottom: 0,
                    minValue: "little",
                    maxValue: "a lot!"
                },
            },


            "areasSettings": {
                "selectedColor": "#CC0000",
                "selectable": true,
                "balloonText": "National Spending in [[title]]: <b>[[value]]</b>"
            },

            "listeners": [{
                "event": "clickMapObject",
                "method": (e) => {
                    console.log(e.mapObject.enTitle)
                    this.selectedCountrySpending(e)
                }
            }]
        }
        return (

            <AmCharts.React style={{ width: "100%", height: "600px" }} options={config} />

        );
    }
}

const mapStateToProps = (state) => ({

})

const mapDispatchToProps = (dispatch) => ({

})

export default connect(mapStateToProps, mapDispatchToProps)(App)

Answer 1

您可以通过设置 color 自定义开始和结束颜色和 colorSolid在您的areasSettings中。您也可以通过直接在area object中设置颜色来指定自己的颜色。 ，例如

{
  "id": "AU",
  "value": 88323532,
  "color": "#00ff00"
},
// ...

请注意，设置 getAreasFromMap: true 本质上会启用所有其他区域，就像它们是在 dataProvider 中定义的一样，这可能不是您想要的。

这是 color 和 colorSolid 的演示:

var chart = AmCharts.makeChart("chartdiv",  {
  "type": "map",
  "theme": "light",
  "colorSteps": 10,

  "dataProvider": {

      "map": "worldLow",
      //"getAreasFromMap": true, 
      "areas": [{
          "id": "AU",
          "value": 658188.6034,
          "selected": true
      },
      {
          "id": "AT",
         // "color": "#0000ff", //if you want to specify a color directly on an area
          "value": 217653.4063
      },
      {
          "id": "BE",
          "value": 255659.6354
      },
      {
          "id": "CA",
          "value": 896977.0966
      },


      ],



      valueLegend: {
          divId: "legenddiv",

          left: 10,
          bottom: 0,
          minValue: "little",
          maxValue: "a lot!"
      },
  },


  "areasSettings": {
    "color": "#880000",
    "colorSolid": "#008888",
      "selectedColor": "#CC0000",
      "selectable": true,
      "balloonText": "National Spending in [[title]]: <b>[[value]]</b>"
  },

  "listeners": [{
      "event": "clickMapObject",
      "method": (e) => {
      }
  }]});

html, body {
  width: 100%;
  height: 100%;
  margin: 0px;
}

#chartdiv {
	width: 100%;
	height: 100%;
}

<script src="//www.amcharts.com/lib/3/ammap.js"></script>
<script src="//www.amcharts.com/lib/3/maps/js/worldLow.js"></script>
<script src="//www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>