ハイマップ - 別のレポートで別の凡例を表示する方法は？

Question

私は2つ（またはそれ以上）のレポートを持っています。私はこの2つのレポートを組み合わせて、別の凡例で1つのマップに表示したいと思います。

exampleを参照してください。

凡例が表示されているときに、結果がツールチップで共有されます。

$(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}' 
       } 
      } 
     }, 
     title : { 
      text : 'Highmaps basic demo' 
     }, 

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

     series : [{ 
      name : 'Report 1', 
      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>', 
      } 
     }] 
    }); 
}); 

Answer 1

これは終わりの答えではなく、より良い解決策です。

私は、より良い見通しのためにlegendItemClickイベントを追加しました。

exampleを参照してください。

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

      }, 
     }, 

しかし、私は同じ州のデータを共有したいと思います。例えば、私は報告書1にGolestan州でvalue = 1を持っていると私は、結果のツールチップの報告2.合計でGolestan州でvalue = 3を持っている：

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>', 
      } 
     }] 
    }); 
});