Highcharts Density Dot Map Support?

2019-09-19 23:52发布

问题:

At my work my boss is asking me to implement a dot density map . Now I can't get into the details but I have implemented a simple lat/lon map as shown in this link:

http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/maps/demo/mappoint-latlon/

I am using the state of Florida because that is the point of interest for me. Anyway I am trying to create a dot density map where each point is associated with a value. That value would be associated with a simple color where the greater the value the darker the color and the lower the value the lighter the color. The colors can be arbitrary, I just can't find a simple enough example or even example for that matter. I don't know if this supports that, I can create a choropleth.

The problem that even though I have the color axis setup and the JSON format correct for example:

{
                name : 'poi'
                value: value,
                lat: lat-value,
                lon: long-value
}

I still can't get a dot density map. All I get is the working JSFiddle example, with the Florida map and the points on it. I also get the color axis but the points don't have different colors. Can somebody provide some assistance, it could range from information to a simple "It can't be supported in highmaps without customizing it".

回答1:

mappoint series doesn't work with colorAxis, but well, it's Highcharts so it's possible to extend default functionalities:

(function (H) {
    // add colorAxis
    H.seriesTypes.mappoint.prototype.axisTypes = ['xAxis', 'yAxis', 'colorAxis']; 

    // draw points and add setting colors
    H.wrap(H.seriesTypes.mappoint.prototype, "translate", function (p) {
        p.call(this);
        H.seriesTypes.mappoint.prototype.translateColors.call(this);
    });

    // copy method from heatmap for color mixin
    H.seriesTypes.mappoint.prototype.translateColors = H.seriesTypes.heatmap.prototype.translateColors; 

    // use "value" to calculate color
    H.seriesTypes.mappoint.prototype.colorKey = 'value';
})(Highcharts);

And working demo: http://jsfiddle.net/4mabw6zr/