Googles Санки Диаграмма с данными CSV

Я хочу, чтобы получить данные в формате CSV через файл в ниже Санки диаграммы:Googles Санки Диаграмма с данными CSV

Я использую этот код из 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>

То, что я хочу сделать, это импортировать файл CSV с 3 переменными в эту диаграмму Санки, вместо того, чтобы делать жесткую кодировку, как это сделано здесь.

Пример файла CSV может быть:

С, чтобы, граф

google.com, amazon.com, 5

google.com, ford.com, 10

форма таблицы, если она менее запутанная:

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

источник

2016-12-29 Jannick Mikkelsen

Не могли бы вы добавить csv или дать небольшой образец его структуры? –

выведет пример конструкции –

Проверьте это - https://developers.google.com/chart/interactive/docs/dev/dsl_javadocs/com/google/visualization/datasource/util/CsvDataSourceHelper – Amit

Google графики не поддерживают загрузку CSV п Иль вне коробки, но вы можете использовать CSV плагин, чтобы преобразовать его в массив .Я предложил бы использовать это одно jquery-csv .use его как этот

<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

источник

2016-12-29 18:05:38 Viney

ответ

Смежные вопросы