带有 csv 数据的 Google 桑基图答案

【问题标题】：Googles Sankey Diagram with csv data带有 csv 数据的 Google 桑基图
【发布时间】：2016-12-29 14:21:43
【问题描述】：

我想通过文件将 csv 数据获取到下面的 sankey 图中：

我使用来自https://developers.google.com/chart/interactive/docs/gallery/sankey的代码

<html>
<body>
 <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<div id="sankey_multiple" style="width: 900px; height: 300px;"></div>

<script type="text/javascript">
  google.charts.load("current", {packages:["sankey"]});
  google.charts.setOnLoadCallback(drawChart);
   function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'From');
    data.addColumn('string', 'To');
    data.addColumn('number', 'Weight');
    data.addRows([
       [ 'Brazil', 'Portugal', 5 ],
       [ 'Brazil', 'France', 1 ],
       [ 'Brazil', 'Spain', 1 ],
       [ 'Brazil', 'England', 1 ],
       [ 'Canada', 'Portugal', 1 ],
       [ 'Canada', 'France', 5 ],
       [ 'Canada', 'England', 1 ],
       [ 'Mexico', 'Portugal', 1 ],
       [ 'Mexico', 'France', 1 ],
       [ 'Mexico', 'Spain', 5 ],
       [ 'Mexico', 'England', 1 ],
       [ 'USA', 'Portugal', 1 ],
       [ 'USA', 'France', 1 ],
       [ 'USA', 'Spain', 1 ],
       [ 'USA', 'England', 5 ],
       [ 'Portugal', 'Angola', 2 ],
       [ 'Portugal', 'Senegal', 1 ],
       [ 'Portugal', 'Morocco', 1 ],
       [ 'Portugal', 'South Africa', 3 ],
       [ 'France', 'Angola', 1 ],
       [ 'France', 'Senegal', 3 ],
       [ 'France', 'Mali', 3 ],
       [ 'France', 'Morocco', 3 ],
       [ 'France', 'South Africa', 1 ],
       [ 'Spain', 'Senegal', 1 ],
       [ 'Spain', 'Morocco', 3 ],
       [ 'Spain', 'South Africa', 1 ],
       [ 'England', 'Angola', 1 ],
       [ 'England', 'Senegal', 1 ],
       [ 'England', 'Morocco', 2 ],
       [ 'England', 'South Africa', 7 ],
       [ 'South Africa', 'China', 5 ],
       [ 'South Africa', 'India', 1 ],
       [ 'South Africa', 'Japan', 3 ],
       [ 'Angola', 'China', 5 ],
       [ 'Angola', 'India', 1 ],
       [ 'Angola', 'Japan', 3 ],
       [ 'Senegal', 'China', 5 ],
       [ 'Senegal', 'India', 1 ],
       [ 'Senegal', 'Japan', 3 ],
       [ 'Mali', 'China', 5 ],
       [ 'Mali', 'India', 1 ],
       [ 'Mali', 'Japan', 3 ],
       [ 'Morocco', 'China', 5 ],
       [ 'Morocco', 'India', 1 ],
       [ 'Morocco', 'Japan', 3 ]
    ]);

    // Set chart options
    var options = {
      width: 600,
    };

    // Instantiate and draw our chart, passing in some options.
    var chart = new google.visualization.Sankey(document.getElementById('sankey_multiple'));
    chart.draw(data, options);
   }
</script>
</body>
</html>

我想要做的是将一个包含 3 个变量的 csv 文件导入到这个 Sankey 图表中，而不是像这里那样对其进行硬编码。

CSV 文件的示例可能是：

从，到，计数

google.com、amazon.com、5

google.com、ford.com、10

表格形式，如果它不那么混乱：

From              To     count
google.com  amazon.com     5
google.com  ford.com       10

【问题讨论】：

能否添加 csv 或提供其结构的小样本？
已上传结构示例
看看这个 - developers.google.com/chart/interactive/docs/dev/dsl_javadocs/…

标签： javascript csv sankey-diagram

【解决方案1】：

Google 图表不支持开箱即用加载 CSV 文件，但您可以使用 CSV 插件将其转换为数组。我建议使用这个jquery-csv。像这样使用它

<body>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/0.71/jquery.csv-0.71.min.js"></script>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<div id="sankey_multiple" style="width: 900px; height: 300px;"></div>

<script type="text/javascript">
  google.charts.load("current", {packages:["sankey"]});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    $.get("data.csv", function(csvString) {
      // fetch CSV file using ajax
      var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar});
      // after parsing , arrayData is 2-D array holding all the data contained in CSV file

      var data = new google.visualization.DataTable();
        data.addColumn('string', 'From');
        data.addColumn('string', 'To');
        data.addColumn('number', 'Weight');
        data.addRows(arrayData);

      // Set chart options
      var options = {
        width: 600,
      };

      // Instantiate and draw our chart, passing in some options.
      var chart = new google.visualization.Sankey(document.getElementById('sankey_multiple'));
      chart.draw(data, options);

    });
  }

</script>
</body>

您的 data.csv 文件可能如下所示，不需要标题

google.com,amazon.com,5
google.com,ford.com,10
google.com,stackoverflow.com,50
google.com,ford.com,10

【讨论】：