javascript - 在单独的容器中包含丰富信息的 Highmaps

Question

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

1. 单独的容器，其中包含额外信息(国家/地区图表)显示而不是单个容器，其中 map 和显示额外信息 ppotaczek 给出的解决方案
2. 如果未选择国家/地区，是否可以显示每个类别的总数。在下面的示例中，这意味着在 (Countrychart)图，cat1:14，cat2:3 和 cat3:15(加拿大、美国和印度添加一起)显示。 ppotaczek 给出的解决方案
3. flags 没有显示，我不明白这是为什么。 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

我可以回答你的第三个问题:没有显示标志，我不明白这是为什么。

问题出在这一行:

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

点对象中没有flag属性，你可以把它改成这样:

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

现在您将拥有旗帜。

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