Question

我在json格式中使用带有“点击丰富信息”的高地图。为此，我使用了先前存在的示例。但是，我想补充一些内容。

~~其中包含额外信息（countryChart）的单独容器而不是显示地图和地图的单个容器显示了额外的信息~~ ppotaczek提供的解决方案
如果未选择任何国家，是否可以显示每个类别的总数。在下面的示例中，这意味着在（Countrychart）中图表，类别1：14，类别2：3和类别3：15（添加了加拿大，美国和印度一起显示）。
~~不显示标志，我不知道为什么。~~ Emad提供的解决方案

在此example中，我希望从图中开始，这希望是额外功能的良好基础。

$.ajax({
  url: 'https://cdn.rawgit.com/highcharts/highcharts/v6.0.4/samples/data/world-population-history.csv',
  success: function() {
    var jsondata = {
      "data": [{
        "value": "8",
        "code": "in",
        "name": "india",
        "testdata": [{
          "vcount": "3"
        }, {
          "vcount": null
        }, {
          "vcount": "5"
        }]
      }, {
        "value": "15",
        "code": "us",
        "name": "united states",
        "testdata": [{
          "vcount": "9"
        }, {
          "vcount": "2"
        }, {
          "vcount": "4"
        }]
      }, {
        "value": "9",
        "code": "ca",
        "name": "canada",
        "testdata": [{
          "vcount": "2"
        }, {
          "vcount": "1"
        }, {
          "vcount": "6"
        }]
      }]
    }

    var mapChart;
    var countryChart;
    var graphdata = [];
    var graphdataf = [];
    var valuecount;
    var countries = {};

    $.each(jsondata.data, function(i, item) {
      var graphval = [];
      var value = item.value;
      var code = item.code;
      var name = item.name;

      graphval.push(code);
      graphval.push(value);
      graphdata.push(graphval);

      $.each(item.testdata, function(j, itemval) {});
      
      countries[item.code] = {
        name: item.name,
        code3: item.code,
        data: item.testdata
      };
    });

    var data = [];

    for (var code3 in countries) {
      if (countries.hasOwnProperty(code3)) {
        $.each(countries[code3].data, function(j, itemval) {
          //var graphvaldata = [];
          var value = itemval.vcount;
          data.push({
            name: countries[code3].name,
            code3: code3,
            value: value,
          });
        });
      }
    }
    // Wrap point.select to get to the total selected points
    Highcharts.wrap(Highcharts.Point.prototype, 'select', function(proceed) {
      proceed.apply(this, Array.prototype.slice.call(arguments, 1));
      var points = mapChart.getSelectedPoints();
      if (points.length) {
        if (points.length === 1) {
          $('#info #flag').attr('class', 'flag ' + points[0].flag);
          $('#info h2').html(points[0].name);
        } else {
          $('#info #flag').attr('class', 'flag');
          $('#info h2').html('Comparing countries');
        }
        
        $('#info .subheader').html('<h4>Historical population</h4><small><em>Shift + Click on map to compare countries</em></small>');

        if (!countryChart) {
          countryChart = Highcharts.chart('country-chart', {
            chart: {
              height: 250,
              spacingLeft: 0
            },
            credits: {
              enabled: false
            },
            title: {
              text: null
            },
            subtitle: {
              text: null
            },
            xAxis: {
              tickPixelInterval: 50,
              crosshair: true,
              categories: ['cat1', 'cat2', 'cat3']
            },
            yAxis: {
              title: null,
              opposite: true
            },
            tooltip: {
              split: true
            },
            plotOptions: {
              series: {
                animation: {
                  duration: 500
                },
                marker: {
                  enabled: false
                }
              }
            }
          });
        }
        
        $.each(points, function(i, point) {
          var data,
            dataRaw = countries[point['hc-key']].data;
          if (dataRaw) {
            data = dataRaw.map((p) => parseInt(p.vcount));
          }

          // Update
          if (countryChart.series[i]) {
            countryChart.series[i].update({
              name: this.name,
              data: data,
              type: points.length > 1 ? 'column' : 'column'
            }, false);
          } else {
            countryChart.addSeries({
              name: this.name,
              data: data,
              type: points.length > 1 ? 'column' : 'column'
            }, false);
          }
        });
        
        while (countryChart.series.length > points.length) {
          countryChart.series[countryChart.series.length - 1].remove(false);
        }
        countryChart.redraw();
      } else {
        $('#info #flag').attr('class', '');
        $('#info h2').html('');
        $('#info .subheader').html('');
        if (countryChart) {
          countryChart = countryChart.destroy();
        }
      }
    });
    
    // Initiate the map chart
    mapChart = Highcharts.mapChart('container', {
      title: {
        text: 'Population history by country'
      },
      subtitle: {
        text: 'Source: <a href="http://data.worldbank.org/indicator/SP.POP.TOTL/countries/1W?display=default">The World Bank</a>'
      },
      mapNavigation: {
        enabled: true,
        buttonOptions: {
          verticalAlign: 'bottom'
        }
      },
      colorAxis: {
        type: 'logarithmic',
        endOnTick: false,
        startOnTick: false,
        minColor: '#fff',
        maxColor: '#3D1C5C',
        min: 5,
        max: 15,
      },
      tooltip: {
        footerFormat: '<span style="font-size: 10px">(Click for details)</span>'
      },
      credits: {
        enabled: false
      },
      series: [{
        data: graphdata,
        mapData: Highcharts.maps['custom/world'],
        joinBy: 'hc-key',
        name: 'Total Play',
        allowPointSelect: true,
        cursor: 'pointer',
        states: {
          select: {
            color: '#a4edba',
            borderColor: 'black',
            dashStyle: 'shortdot'
          }
        }
      }]
    });
  }
});

* {
  font-family: sans-serif;
}

#wrapper {
  height: 500px;
  width: 1000px;
  margin: 0 auto;
  padding: 0;
  overflow: visible;
}

#container {
  float: left;
  height: 500px;
  width: 700px;
  margin: 0;
}

#info {
  float: left;
  width: 270px;
  padding-left: 20px;
  margin: 100px 0 0 0;
  border-left: 1px solid silver;
}

#info h2 {
  display: inline;
  font-size: 13pt;
}

#info .f32 .flag {
  vertical-align: bottom !important;
}

#info h4 {
  margin: 1em 0 0 0;
}

@media screen and (max-width: 920px) {
  #wrapper,
  #container,
  #info {
    float: none;
    width: 100%;
    height: auto;
    margin: 0.5em 0;
    padding: 0;
    border: none;
  }
}

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/maps/modules/map.js"></script>
<script src="https://code.highcharts.com/mapdata/custom/world.js"></script>
<!-- Flag sprites service provided by Martijn Lafeber, https://github.com/lafeber/world-flags-sprite/blob/master/LICENSE -->
<link rel="stylesheet" type="text/css" href="//github.com/downloads/lafeber/world-flags-sprite/flags32.css" />

<div id="wrapper">
  <div id="container"></div>
  <div id="info">
    <span class="f32"><span id="flag"></span></span>
    <h2></h2>
    <div class="subheader">Click countries to view history</div>
    <div id="country-chart"></div>
  </div>
</div>

在此先感谢您的帮助！

Answer 1

我可以提第三个问题：The flags are not displayed, I cannot figure out why this is.

问题出在这一行：

$('#info #flag').attr('class', 'flag ' + points[0].flag);

points对象中没有flag属性，您可以将其更改为：

$('#info #flag').attr('class', 'flag ' + points[0]["hc-key"]);

现在您将拥有该标志。

https://jsfiddle.net/vq26m8nb/7/

Answer 2

关于您的问题：

两个图表已经在单独的容器中。您可以删除ID为'wrapper'的div来拆分它们，以使它们不会并排显示。检查以下示例：https://jsfiddle.net/BlackLabel/8jo7vzty/

是的，例如，您可以在某个点上使用附加参数调用select，然后使用包装的select方法对数据求和（取决于附加参数）。

    if (points.length) {
        ...

        if (arguments[3]) {
            totalData = [];

            Highcharts.objectEach(countries, function(el){
                el.data.forEach(function(val, i){
                    if (totalData[i]) {
                        totalData[i] += parseInt(val.vcount)
                    } else {
                        totalData[i] = parseInt(val.vcount);
                    }
                });
            });

            $('#info h2').html('Total data');
            countryChart.series[0].setData(totalData);
            mapChart.series[0].points[0].select(false, false, true);
        }

    } else if (!arguments[3]) {
        $('#info #flag').attr('class', '');
        $('#info h2').html('');
        $('#info .subheader').html('');
        if (countryChart) {
            countryChart = countryChart.destroy();
        }
    }

...

mapChart = Highcharts.mapChart('container', ...);

mapChart.series[0].points[0].select(true, false, true);

实时演示： https://jsfiddle.net/BlackLabel/mg7x3kje/

由于您的点没有flag属性，因此不会显示标志。您可以按照@Emad Dehnavi的建议添加它们。

在单独的容器中具有丰富信息的高图

2 个答案: