扩展Highmaps副作用 [英] Extending Highmaps Side Effect

问题描述

我试图创建一个佛罗里达州的点密度图。虽然我知道Highmaps不支持颜色轴与mappoints。我扩展它，它工作，但它带有副作用。当我点击图例中的某个类别时，不会出现隐藏。例如，如果我点击'> 10'，所有大于10的值都不会隐藏。当我打开Chrome调试器时，它指出： a.setVisible不是一个函数我可以做些什么来解决这个问题。这是一项要求，但似乎很小。我会很感激任何提示，或者某种例子会是完美的。我无法显示比所示更多的代码。如果你需要我解释更多的问题，我会很乐意这样做。

$ b 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）;


//启动图表
$（'＃container'）。highcharts（'Map'，{
title：{
text：title
}，
mapNavigation：{
enabled：false，
}，
colorAxis：{
dataClasses：[{
from：0，
to：3，
color：＃66FFFF
}，{
from：4，
to：9，
color：＃0099FF
，{
来自：10，
颜色：＃0000FF
}
]
}，
tooltip：
{
enabled：true
}
，
series：[{
mapData：Highcharts.maps ['countries / us / us-fl 'all']，
名称：'Basemap'，
borderColor：'＃A0A0A0'，
nullColor：'rgba（200,200,200,0.3）'，
showInLegend ：false，
}，
{
//使用纬度/经度指定点
类型：'mappoint'，
名称：'A'，
turboThreshold：2000000，
data：p_data，
dataLabels：{
启用：false

}
}，
{
//使用纬度/经度指定点
类型：'mappoint'，
名称：'B'，
turboThreshold： 2000000，
data：m_data，
dataLabels：{
enabled：false
$ b}
}，
{
//使用纬度/经度指定点
类型：'mappoint'，
名称：'C'，
turboThreshold：2000000，
数据：h_data，
dataLabels：{
启用：false

}
}



]}）;

玩法示例： http://jsfiddle.net/dlope073/4mabw6zr/2/

解决方案

从默认的 map 系列使用 setVisible 方法。像这样： 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; //使用与m​​ap类型相同的setVisible方法。
 
 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）; 
  

I am trying to create a dot density map of the state of Florida. While I know that Highmaps doesn't support color axis with mappoints. I extended it and it works but it comes with a side affect. When I click on one of the categories in the legend no hiding occurs. For example if I click on '>10', all values greater than 10 don't hide. When I open up the Chrome debugger it states that: a.setVisible is not a function What can I do to solve this problem. This is a requirement, while it may seem minor. I would appreciate any sort of tips or maybe some sort of example would be perfect. I can't show more code than what is shown. If you need me to explain more about the problem I will be glad to do so.

               (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

                            }
                        }



                    ]});

A sample to play with: http://jsfiddle.net/dlope073/4mabw6zr/2/

解决方案

Use setVisible method from default map series. Like this: 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);

这篇关于扩展Highmaps副作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！