Question

我有两个（或更多）报告，我希望将这两个报告合并，并在一个地图中显示一个单独的图例。

请参阅example。

当图例可见时，结果也会在工具提示中共享。

df <- structure(list(X24_TT = c(0.09, 0.94, 0.89, 0.12, 0.08), X35_FTT = c(0.87, 
0.12, 0.11, 0.8, 0.09), X55_FTT = c(0.89, 0.09, 0.86, 0.15, 0.15
), X80_FTT = c(0.15, 0.92, 0.08, 0.18, 0.88)), .Names = c("X24_TT", 
"X35_FTT", "X55_FTT", "X80_FTT"), class = "data.frame", row.names = c(NA, 
-5L))

Answer 1

这不是最终答案，只是一个更好的解决方案。

我添加了legendItemClick事件以便更好地查看。

请参阅example。

            events : {
              legendItemClick : function(){
                  for(i=0; i < this.chart.series.length; i++) {
                      this.chart.series[i].hide();
                  }

            },
        },

但我希望分享相同的省份数据。例如，我在报告1中的value = 1省有Golestan，我在报告2中的value = 3省有Golestan。结果工具提示的总和是：

Report 1
 Golestan : 1
Report 2
 Golestan : 3
Sum
 Goelstan : 4

Answer 2

试试这个。到目前为止，我错过的是即使当前所选报告没有值，也会显示工具提示。

This code in jsfiddle.这是你想要建立的吗？

$(function() {

    // Initiate the chart
    $('#container').highcharts('Map', {
        plotOptions: {
            map: {
                mapData: Highcharts.maps['countries/ir/ir-all'],
                joinBy: 'hc-key',
                states: {
                    hover: {
                        color: '#BADA55'
                    }
                },
                dataLabels: {
                    enabled: true,
                    format: '{point.name}'
                },
                events: {
                    legendItemClick: function() {
                        for (i = 0; i < this.chart.series.length; i++) {
                            this.chart.series[i].hide();
                        }

                    },
                },
            }
        },
        title: {
            text: 'Highmaps basic demo'
        },
        tooltip: {
            formatter: function() {
                var pointName = this.point.name;

                function filterByName(value) {
                    return (value.hasOwnProperty("name") && typeof value.name !== "undefined" && value.name === pointName);
                }

                var result = "<b>" + this.point.name + "</b><br>";
                var allSeries = this.series.chart.series;
                var curSeries, curValue;
                for (var i = 0; i < allSeries.length; i++) {
                    curSeries = allSeries[i];
                    curValue = curSeries.points.filter(filterByName);
                    if (curValue.length === 0 || (curValue[0].hasOwnProperty("value") && curValue[0].value == null)) {
                        return result;
                    }
                    curValue = curValue[0].value;
                    result += '<br><b>' + curSeries.name + '</b> ' + curValue;
                }
                return result;
            }
        },

        mapNavigation: {
            enabled: true,
            buttonOptions: {
                verticalAlign: 'bottom'
            }
        },

        series: [{
            name: 'Report 1',
            visible: false,
            data: [{
                'hc-key': "ir-ea",
                value: 1000,
            }, {
                'hc-key': "ir-kv",
                value: 1000,
            }, {
                'hc-key': "ir-kd",
                value: 1000,
            }, {
                'hc-key': "ir-wa",
                value: 1000,
            }],
            mapData: Highcharts.maps['countries/ir/ir-all'],
            joinBy: 'hc-key',
            states: {
                hover: {
                    color: '#BADA55'
                }
            },
            dataLabels: {
                enabled: true,
                style: {
                    textShadow: '',
                },
                format: '<span style="color:black">{point.name}</span>',
            }
        }, {
            name: 'Report 2',
            data: [{
                'hc-key': "ir-wa",
                value: '3000',
            }, {
                'hc-key': "ir-ea",
                value: '3000',
            }],
            mapData: Highcharts.maps['countries/ir/ir-all'],
            joinBy: 'hc-key',
            states: {
                hover: {
                    color: '#BADA55'
                }
            },
            dataLabels: {
                enabled: true,
                style: {
                    textShadow: '',
                },
                format: '<span style="color:black">{point.name}</span>',
            }
        }]
    });
});

Highmaps - 我如何通过不同的报告获得单独的传奇？

2 个答案: