文章/答案/技术大牛

发布

社区首页 >问答首页 >带有Worldmap的AmCharts multiCSV数据处理机

问带有Worldmap的AmCharts multiCSV数据处理机
EN

Stack Overflow用户

提问于 2018-08-30 06:38:01

回答 1查看 424关注 0票数 0

我有很多CSV文件，

我需要他们创造dataSetSelector

在选择上，我需要得到表

但在我桌子的尽头我变得不清楚了。

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

地图底部的条形图

所以需要得到这样的东西

此外，屏幕必须根据用户屏幕大小自动调整。
并在每个图表栏上的鼠标上高亮显示地图上相同的值，如果可能的话在表项上显示相同的值。
在图表上的按下栏上，选择具有此值的映射区域，如果可能的话，在表项上选择相同的区域。
valueLegend最小值必须是表中的最小值，也是最大值。
如果表中有重复国家字段，那么在表中只显示一个国家并高亮显示这一行或将*放到国家名中(并且很好地在鼠标上显示带有所有重复值的弹出)，在地图上将所有重复的字段放入按换行符分割的描述部分，并使用*显示值。

我做了什么，codepen.io

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

所以请帮助我实现我的梦想。

javascript

amcharts

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-08-30 22:02:35

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

先把容易的部分拿出来

dataSetSelector是一个股票图表属性。为地图和系列图表复制此功能的唯一方法是使用<option>标记和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;
}

你得靠你自己才能让这件事对身高更敏感。我省略了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_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 -->

因为您希望将您的地图绑定到您的数据，所以您需要提供一种将每一行映射到映射区域的简单方法。在您的CSV中添加ISO 3166-2国家代码将大大简化程序：

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

要捕获min/max并将其分配给区域，只需遍历数据并使用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
  }

对于该地图，您还需要确保不仅在init上调用映射标签放置代码，而且在更新地图时调用该代码：

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

这里是一个完全码，上面的所有内容加上一些重构的代码。注意，标签被放置在奇怪的地方。示例从定义了为特定区域设置异常纬度和经度变量。你需要弄清楚这些值。

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/52090629

复制

相似问题

问带有Worldmap的AmCharts multiCSV数据处理机
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问带有Worldmap的AmCharts multiCSV数据处理机EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问带有Worldmap的AmCharts multiCSV数据处理机
EN