AmCharts带有世界地图的多CSV数据加载器

Question

我有很多CSV文件，

我需要从他们创造dataSetSelector

在选择我需要得到表

但我在桌子的末尾未定义。

和世界地图基于选定的数据

和地图上的条形图底部

所以需要得到类似的东西

1. 屏幕也必须根据用户屏幕大小自动调整
2. 并且在鼠标悬停在每个图表栏上以在地图上突出显示相同的值，如果可能，在表格项目上相同
3. 在图表上的按栏上选择具有此值的地图区域，如果可能，在表格项目上相同
4. valueLegend min值必须是表中的最小值，也是最大值
5. 如果表格中有重复的国家/地区字段，那么在表格中只显示一个国家/地区并突出显示此行或将*添加到国家/地区名称（并且可以在鼠标悬停时显示所有重复值的弹出窗口），在地图上将所有重复项放入说明部分用换行符拆分并用*显示值

我做什么codepen.io

当我第一天学习AmCharts时，我无法获取dataSetSelector并将来自多个csv文件的数据放入其中。此外，我无法找到如何加入股票图表与地图和表格的信息。

所以请帮助实现我的目标。

Answer 1

我将专注于2-4中特定于AmCharts的内容，因为这是问题的主要内容。我也只是为AmCharts版本3.x提供解决方案。您应该可以从那里处理1和5，因为您可以调整CSS以更多地容纳1并添加您需要满足的任何逻辑5。

首先让简单的零件脱离困境

• dataSetSelector是一个股票图表属性。为地图和连续图表重现此功能的唯一方法是使用<select>标记和JavaScript编写您自己的<option>，以便在更改时触发所需的加载操作。
• 股票图表仅允许基于日期的数据。它不能用于类别/ x轴只是截图中的字符串的图表，因此它不适合您。

考虑到上述情况，您需要设置和定位下拉列表，表格和图表/地图div，并添加代码以将所有内容链接在一起。

这种布局的一些基本HTML和CSS

HTML：

<div id="container">
  <div id="selector-table-div">
    <select id="data-selector">
      <option value="path/to/csv-1">Dataset 1</option>
      <option value="path/to/csv-2">Dataset 2</option>
    </select>
    <div id="datatable"></div>
  </div>
  <div id="mapdiv"></div>
  <div id="chartdiv"></div>
</div>

CSS：

#mapdiv {
  width: 70%;
  height: 400px;
  float: left;
}
#chartdiv {
  width: 100%;
  height: 250px;
}
#selector-table-div {
  width: 20%;
  height: 450px;
  float: left;
}

你可以自己让它对身高更敏感。为了简洁，我省略了数据表的内容并突出显示了行。

在您的JS中，当您选择不同的下拉项时，您需要附加change事件以触发页面更新：

document
  .getElementById("data-selector")
  .addEventListener("change", function(e) {
    updatePage(e.target.value); //update page calls AmCharts.loadFile, updates/creates the table, map and chart with new data
  });

由于您计划在同一页面上同时使用图表和地图，因此需要使用amcharts.js和ammap_amcharts_extension.js。在同一页面中使用amcharts.js和ammaps.js会导致图表和地图出现错误，因为两个文件都会覆盖彼此的方法。您的柱形图需要serial.js：

<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/ammap_amcharts_extension.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<!-- other stuff omitted -->

由于您希望将地图与数据绑定，因此您需要提供一种将每行映射到地图区域的简便方法。将ISO 3166-2国家/地区代码添加到CSV将极大地简化了流程：

country,visits,country_code
USA,2025,US
China,1882,CN
Japan,1809,JP
...

从那里，您可以使用新创建的country_code列设置地图的区域作为MapArea id来激活地图上的区域：

  var areas = data.map(function(row) {
      return {
        id: row.country_code, //use ISO code for area ids
        value: row.visits
      };
    });
  // ...
  AmCharts.makeChart("mapdiv", {
    // ..
    dataProvider: {
      map: "worldLow",
      areas: areas
    }
  });

要捕获最小值/最大值并将其分配给区域，只需循环遍历数据并使用Math.min / Math.max：

  var minValue = Number.MAX_VALUE;
  var maxValue = Number.MIN_VALUE;
  data.forEach(function(row) {
    minValue = Math.min(minValue, row.visits);
    maxValue = Math.max(maxValue, row.visits);
  });
  // ...
  AmCharts.makeChart("mapdiv", {
    // ..
    valueLegend: {
      minValue: minValue,
      maxValue: maxValue
      // ...
    }
  });      

您还需要在单独的函数中调整地图/图表创建代码，这些函数知道何时创建新地图/图表或更新现有地图/图表：

var map, chart;
// ...
function updateMap(data) {
  // ...
  if (map) {
     //makeChart here
  }
  else {
    map.dataProvider.areas = areas;
    map.valueLegend.minValue = minValue;
    map.valueLegend.maxValue = maxValue;
    map.validateData(); // update map
  }

对于地图，您还需要确保不仅在初始化时调用地图标签放置代码，而且还要在更新地图时调用：

function updateMap(data) {
  // ...
  if (map) {
     //makeChart here
  }
  else {
     // data update here
  }
  updateLabel(); //update labels - same code as before

创建图表非常简单。您可以添加clickGraphItem和rollOverGraphItem事件来选择相应的地图区域，并在点击/悬停时突出显示表格行：

   chart = AmCharts.makeChart("chartdiv", {
      type: "serial",
      dataProvider: data,
      // ...
      listeners: [
        {
          event: "clickGraphItem",
          method: handleBarInteraction
        }, {
          event: "rollOverGraphItem",
          method: handleBarInteraction 
        }
      ]

function handleBarInteraction(e) {
  map.selectObject(map.getObjectById(e.item.dataContext.country_code));
  var selected = document.querySelector(".selected");

  if (selected) {
    selected.classList.remove("selected");
  }
  document
    .getElementById(e.item.dataContext.country_code)
    .classList.add("selected");
}

您的未定义行可能来自CSV中的额外换行符。在创建表格，地图和图表之前，您只需检查最后一项并将其弹出数组：

var data = AmCharts.parseCSV(response, {
   // ...
});

if (data[data.length -1].country === undefined) {
  data.pop();
}

这是一个complete codepen，包含以上所有内容以及一些重组代码。请注意，标签放置在奇怪的地方。 example you pulled the label code from定义了异常纬度和经度变量，供您设置特定区域。你需要找出这些值。