javascript - 带小数点的 Highcharts map

Question

我尝试复制 this具有不同类型数据文件的 highcharts 示例文件。在新数据库中，每个国家/地区的预期生命周期为小数点后 13 位。来源也是世界银行，这使得结构具有可比性。这是示例 JSFIDDLE .不幸的是，这不起作用，因为第 26 行的“numRegex =/^[0-9.]+$/”可能是错误的。不幸的是，我不知道应该放在这里什么。

HTML

<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>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.css">

<!-- 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 class="container_fluid">

<div class="row">
<div class="col-lg-12 col-md-12">
  <div class="panel color-orange shadow">
    <div class="panel-heading  text-white text-center">
    </div>
    <div class="panel-body color-grey text-center">
      <div class="col-lg-12 col-md-12 position-padding-ver position-padding-hor">
        <div id="wrapper_landkaart">
          <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>
      </div>
    </div>
  </div>
</div>
</div>
</div>

JavaScript

      $.ajax({
    url: 'https://cdn.filestackcontent.com/WZkkd6c4S3euwmgoV88v',
    success: function(csv) {

      // Parse the CSV Data
      /*Highcharts.data({
          csv: data,
          switchRowsAndColumns: true,
          parsed: function () {
              console.log(this.columns);
          }
      });*/

      // Very simple and case-specific CSV string splitting
      function CSVtoArray(text) {
        return text.replace(/^"/, '')
          .replace(/",$/, '')
          .split('","');
      }

      csv = csv.split(/\n/);

      var countries = {},
        mapChart,
        countryChart,
        numRegex = /^[0-9\.]+$/,
        lastCommaRegex = /,\s$/,
        quoteRegex = /\"/g,
        categories = CSVtoArray(csv[2]).slice(4);

      // Parse the CSV into arrays, one array each country
      $.each(csv.slice(3), function(j, line) {
        var row = CSVtoArray(line),
          data = row.slice(4);

        $.each(data, function(i, val) {
          val = val.replace(quoteRegex, '');
          if (numRegex.test(val)) {
            val = parseInt(val, 10);
          } else if (!val || lastCommaRegex.test(val)) {
            val = null;
          }
          data[i] = val;
        });

        countries[row[1]] = {
          name: row[0],
          code3: row[1],
          data: data
        };
      });

      // For each country, use the latest value for current population
      var data = [];
      for (var code3 in countries) {
        if (countries.hasOwnProperty(code3)) {
          var value = null,
            year,
            itemData = countries[code3].data,
            i = itemData.length;

          while (i--) {
            if (typeof itemData[i] === 'number') {
              value = itemData[i];
              year = categories[i];
              break;
            }
          }
          data.push({
            name: countries[code3].name,
            code3: code3,
            value: value,
            year: year
          });
        }
      }

      // Add lower case codes to the data set for inclusion in the tooltip.pointFormat
      var mapData = Highcharts.geojson(Highcharts.maps['custom/world']);
      $.each(mapData, function() {
        this.id = this.properties['hc-key']; // for Chart.get()
        this.flag = this.id.replace('UK', 'GB').toLowerCase();
      });

      // 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
              },
              yAxis: {
                title: null,
                opposite: true
              },
              tooltip: {
                split: true
              },
              plotOptions: {
                area: {
                  color: '#fa7921'
                },
                series: {
                  animation: {
                    duration: 500
                  },
                  marker: {
                    enabled: false
                  },
                  threshold: 0,
                  pointStart: parseInt(categories[0], 10)
                }
              }
            });
          }

          $.each(points, function(i) {
            // Update
            if (countryChart.series[i]) {
              /*$.each(countries[this.code3].data, function (pointI, value) {
                  countryChart.series[i].points[pointI].update(value, false);
              });*/
              countryChart.series[i].update({
                name: this.name,
                data: countries[this.code3].data,
                type: points.length > 1 ? 'line' : 'area'
              }, false);
            } else {
              countryChart.addSeries({
                name: this.name,
                data: countries[this.code3].data,
                type: points.length > 1 ? 'line' : 'area'
              }, 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: '#9E90B3',
          maxColor: '#3D1C5C',
          min: 50000
        },

        tooltip: {
          footerFormat: '<span style="font-size: 10px">(Click for details)</span>'
        },

        series: [{
          data: data,
          mapData: mapData,
          joinBy: ['iso-a3', 'code3'],
          name: 'Current population',
          allowPointSelect: true,
          cursor: 'pointer',
          states: {
            select: {
              color: '#D06918',
              borderColor: 'black',
              dashStyle: 'shortdot'
            }
          }
        }]
      });

      // Pre-select a country
      mapChart.get('us').select();
    }
  });

希望有人能在这方面进一步帮助我。非常感谢。

Answer 1

您的 CSV 文件已损坏，如下所示:

"Data Source,""World Development Indicators"","

应该是这样的

"Data Source","World Development Indicators",

CSV 不会在 , 上拆分，如果它在引号中，因此您可以在文件中将逗号作为文本包含在引号中。

修复您的 CSV 文件，它应该可以工作。