Используйте диаграммы Google с данными Dynami c из CSV - ошибка CORS при доступе к локальному файлу CSV - PullRequest
Новая
       31

Используйте диаграммы Google с данными Dynami c из CSV - ошибка CORS при доступе к локальному файлу CSV

0 голосов
/ 09 апреля 2020

Я нашел варианты этого вопроса здесь и на других сайтах, но ответы, похоже, не работают для меня. Я новичок в гугл-чартах и ​​js, поэтому мне нужно шаг за шагом найти свой путь. После того, как у меня это сработает для одного типа диаграммы, я знаю, что смогу адаптировать код для других вещей, которые мне нужно сделать, но на данный момент есть определенное недостающее звено, которое мне нужно.

Вот код Я использую диаграмму создания ap ie. 

<html>
  <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">

      //load and parse the csv
google.charts.load('current', {
  callback: function () {
    $.get("productsales.csv", function(csvString) {
      var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar});

      var data = new google.visualization.arrayToDataTable(arrayData);

      var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
      chart.draw(data);
    });
  },
  packages: ['corechart']
});
      // Load the Visualization API and the corechart package.
      google.charts.load('current', {'packages':['corechart']});

      // Set a callback to run when the Google Visualization API is loaded.
      google.charts.setOnLoadCallback(drawChart);

      // Callback that creates and populates a data table,
      // instantiates the pie chart, passes in the data and
      // draws it.
      function drawChart() {

        // Create the data table.
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Product');
        data.addColumn('number', 'Monthly Sales');
        data.addRows([
          ['Mushrooms', 25135.00],
          ['Onions', 46784.00],
          ['Lettuce', 45784.00],
          ['Pumpkin', 13542.00],
          ['Capsicum', 87542.00]
        ]);

        // Set chart options
        var options = {'title':'Monthly Sales Values',
                       'width':800,
                       'height':600};

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

  <body>
    <!--Div that will hold the pie chart-->
    <div id="chart_div"></div>
  </body>
</html>

Я хочу получить этот же код для чтения файла CSV для данных таблицы. Вот пример данных csv, которые сохраняются как productsales.csv в том же каталоге, что и файл html: 

Product,Monthly Sales
Mushrooms,25135
Onions,46784
Lettuce,45784
Pumpkin,13542
Capsicum,87542
Tomatoes,12345
Kale,23456
Zucchini,34567
Cabbage,9874

Итак, по сути, как заменить таблицу встроенных данных вызовом во внешний CSV-файл и используйте эти данные для отображения диаграммы.

** Обновление 17 апреля 20 После дальнейших исследований я разработал следующий код для вызова файла с данными: 

function drawChart() {

$.ajax({
    url: 'file://192.168.108.1/home/Google%20Charts/productsales.csv',
    type: 'get',
    success: function (txt) {
        var dataArray = [['Product', 'Monthly Sales']];
        var txtArray = txt.split('\n');
            for (var i=0;txt!=null; i++){
                var txtArray = txt.split("\n");
                var tmpData = txtArray[i].split(",");

                dataArray.push([tmpData[0], parseInt(tmpData[1])]);                 
                var data = google.visualization.arrayToDataTable(dataArray);
                var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
    // Set chart options
    var options = {'title':'Monthly Sales Values',
                   'width':800,
                   'height':600};
                chart.draw(data, options);
            }   
        }
   }); }

В ответ Chrome выдает следующую ошибку: Доступ к XMLHttpRequest в 'file: //192.168.108.1/home/Google%20Charts/productsales.csv' из источника 'null' был заблокирован политикой CORS: Запросы перекрестного происхождения поддерживаются только для схем протоколов: http, data, chrome, chrome -extension, https.

Какой код мне нужно добавить в мой html, что позволит CORS получить доступ к файлу csv

...