扩展Highmaps副作用

时间:2015-06-08 15:19:40

标签: javascript jquery highcharts geojson

我正在尝试创建佛罗里达州的点密度图。虽然我知道Highmaps并不支持带有mappoints的色轴。我扩展它并且它有效,但它带来副作用。当我点击图例中的某个类别时,不会发生隐藏。例如,如果我点击'> 10',则所有大于10的值都不会隐藏。当我打开Chrome调试器时,它指出: a.setVisible不是函数我该怎么做才能解决这个问题。这是一项要求,虽然看起来很小。我会很感激任何提示,或者某些例子是完美的。我无法显示比显示的代码更多的代码。如果你需要我解释这个问题的更多信息,我将很乐意这样做。

               (function (H) {
                    H.seriesTypes.mappoint.prototype.axisTypes = [ 'xAxis', 'yAxis', 'colorAxis'];
                    H.wrap(H.seriesTypes.mappoint.prototype, "translate", function (p) {
                        p.call(this);
                        H.seriesTypes.mappoint.prototype.translateColors.call(this);
                    });
                    H.seriesTypes.mappoint.prototype.translateColors = H.seriesTypes.heatmap.prototype.translateColors;
                    H.seriesTypes.mappoint.prototype.colorKey = 'value';

                })(Highcharts);


                // Initiate the chart
                $('#container').highcharts('Map', {
                    title: {
                        text: title
                    },
                    mapNavigation: {
                        enabled: false,
                    },
                    colorAxis: {
                        dataClasses: [{
                                from: 0,
                                to: 3,
                                color: "#66FFFF"
                            }, {
                                from: 4,
                                to: 9,
                                color: "#0099FF"
                            }, {
                                from: 10,
                                color: "#0000FF"
                            }
                            ]
                    },
                    tooltip:
                            {
                                enabled: true
                            }
                    ,
                    series: [{
                            mapData: Highcharts.maps['countries/us/us-fl-all'],
                            name: 'Basemap',
                            borderColor: '#A0A0A0',
                            nullColor: 'rgba(200, 200, 200, 0.3)',
                            showInLegend: false,
                        },
                        {
                            // Specify points using lat/lon
                            type: 'mappoint',
                            name: 'A',
                            turboThreshold: 2000000,
                            data: p_data,
                            dataLabels: {
                                enabled: false

                            }
                        },
                        {
                            // Specify points using lat/lon
                            type: 'mappoint',
                            name: 'B',
                            turboThreshold: 2000000,
                            data: m_data,
                            dataLabels: {
                                enabled: false

                            }
                        },
                        {
                            // Specify points using lat/lon
                            type: 'mappoint',
                            name: 'C',
                            turboThreshold: 2000000,
                            data: h_data,
                            dataLabels: {
                                enabled: false

                            }
                        }



                    ]});

要播放的示例:http://jsfiddle.net/dlope073/4mabw6zr/2/

1 个答案:

答案 0 :(得分:1)

使用默认setVisible系列中的map方法。像这样:http://jsfiddle.net/4mabw6zr/3

(function (H) {
    H.seriesTypes.mappoint.prototype.axisTypes = ['xAxis', 'yAxis', 'colorAxis'];   
    H.seriesTypes.mappoint.prototype.pointClass.prototype.setVisible = H.seriesTypes.map.prototype.pointClass.prototype.setVisible; // use the same setVisible method as map type.

    H.wrap(H.seriesTypes.mappoint.prototype, "translate", function (p) {
        p.call(this);
        H.seriesTypes.mappoint.prototype.translateColors.call(this);
    });
    H.seriesTypes.mappoint.prototype.translateColors = H.seriesTypes.heatmap.prototype.translateColors;
    H.seriesTypes.mappoint.prototype.colorKey = 'value';
})(Highcharts);