Javascript AmCharts multiCSV数据加载器与Worldmap_Javascript_Amcharts

Javascript AmCharts multiCSV数据加载器与Worldmap

javascript

Javascript AmCharts multiCSV数据加载器与Worldmap,javascript,amcharts,Javascript,Amcharts,我有很多CSV文件我需要从它们创建dataSetSelector 在select上，我需要获取表格但是我在桌子的另一端没有定义和基于选定数据的世界地图和底部的条形图所以我们需要像此外，屏幕必须根据用户屏幕大小自动调整并将鼠标悬停在每个图表栏上，以突出显示地图上的相同值，如果可能的话，在表格项目上的相同值在“图表上的条形图”上，选择具有此值的“地图区域”，如果可能，在表格项目上也是如此值图例最小值必须是表中的最小值，也必须是最大值如果表中有重复的国家字段，则在表中仅显

我有很多CSV文件

我需要从它们创建

dataSetSelector

在select上，我需要获取表格

但是我在桌子的另一端没有定义

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

和底部的条形图

所以我们需要像

此外，屏幕必须根据用户屏幕大小自动调整

并将鼠标悬停在每个图表栏上，以突出显示地图上的相同值，如果可能的话，在表格项目上的相同值

在“图表上的条形图”上，选择具有此值的“地图区域”，如果可能，在表格项目上也是如此

值图例最小值必须是表中的最小值，也必须是最大值

如果表中有重复的国家字段，则在表中仅显示一个国家并突出显示该行或将

放在国家名称上（最好在鼠标上方显示带有所有重复值的弹出窗口），在地图上将所有重复项放在描述部分，按换行符拆分，并用

显示值

我做什么

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

因此，请帮助我实现我的wysh。

我将在2-4中重点介绍AmCharts特定的内容，因为这是问题的要点。我也只打算为AmCharts 3.x版提供一个解决方案。您应该能够从那里处理1和5，因为您可以调整CSS以更适应1，并添加满足5所需的任何逻辑

先把容易的部分去掉

```
dataSetSelector
```
是一个股票图表属性。为地图和序列图重现此功能的唯一方法是使用
标记和JavaScript编写自己的
，以在更改时触发所需的加载操作
股票图表只允许基于日期的数据。它不能用于category/x轴只是屏幕截图中的字符串的图表，因此它不是您的选项

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

此布局的一些基本HTML和CSS

HTML:

这是你自己做的，让它对身高更敏感。为了简洁起见，我省略了datatable内容并突出显示了行

在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\u amcharts\u 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 -->

从那里，您可以使用新创建的“国家/地区代码”列设置地图区域，以激活地图上的区域：

  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

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

   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();
}

下面是一个包含以上所有内容以及一些重构代码的示例。请注意，标签放置在奇怪的地方。定义异常纬度和经度变量，以便为特定区域设置。你需要计算出这些值。

我将在2-4中重点讨论AmCharts特定的内容，因为这是问题的要点。我也只打算为AmCharts 3.x版提供一个解决方案。您应该能够从那里处理1和5，因为您可以调整CSS以更适应1，并添加满足5所需的任何逻辑