Highmaps - как я могу иметь отдельную легенду из разных отчетов?

Question

У меня есть два (или более) отчета, я хочу объединить эти два отчета и показать на одной карте отдельную легенду.

См. 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

Это не конец ответа, только лучшее решение.

i добавлено legendItemClick мероприятие для лучшего обзора.

См. example.

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

      }, 
     }, 

, но я хочу поделиться такими же данными провинции. например, у меня есть value = 1 в Golestan провинции в докладе 1, и у меня есть value = 3 в Golestan провинции в отчете 2. сумме результатов подсказки:

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