Проблема с прокруткой / увеличением линейной диаграммы Google

Question

Проблема с прокруткой / увеличением линейной диаграммы Google

1

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

Увеличить графику Google

    <html>

    <head>
        <!--Load the AJAX API-->
        <script type="text/javascript" src="https://www.google.com/jsapi"></script>
        <script src="/jquery-1.10.1.min.js"></script>
        <script src="/jquery.csv.js"></script>
    <script type="text/javascript">
        google.load('visualization', '1.0', {'packages':['corechart']});
        google.setOnLoadCallback(BasicLine);

        function BasicLine() 
        {
            $.get("mil.csv", function(csvString) 
            {
                var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar}),
                    data      = new google.visualization.arrayToDataTable(arrayData),
                    options   = {
                                  hAxis:
                                  {
                                    title: 'Date'
                                  },
                                  vAxis:
                                  {
                                    title: 'Total'
                                  },
                                  backgroundColor: '#f1f8e9',
                                  lineWidth: 0.7,
                                  chartArea:{width:'100%',height:'100%'},

                                            vAxis: {
                minValue: 0
              },

              explorer: {
                axis: 'horizontal',
                keepInBounds: true,
                maxZoomIn: 4.0
              },
                                },
                    chart = new google.visualization.LineChart(document.getElementById('chart_div'));
                    chart.draw(data, options);

            }, 'text');
        }
    </script>
    </head>
    <body>
        <!--Div that will hold the pie chart-->
        <div id="chart_div"></div>
    </body>

    </html>

Файл CSV (первые 20 строк)

Date,Total
9-Oct-17,103173
10-Oct-17,103377
11-Oct-17,103903
12-Oct-17,103644
13-Oct-17,103511
14-Oct-17,103511
15-Oct-17,103511
16-Oct-17,103541
17-Oct-17,103636
18-Oct-17,103868
19-Oct-17,104419
20-Oct-17,104770
21-Oct-17,104770
22-Oct-17,104770
23-Oct-17,104748
24-Oct-17,104986
25-Oct-17,104994
26-Oct-17,105246
27-Oct-17,105424

ratsstack 16 окт. 2018, в 08:17

Источник

0

Спасибо за ответ. Я обновил вопрос с помощью первых 20 строк моего CSV-файла
ratsstack 16 окт. 2018, в 20:23

Теги:

javascript

charts

google-visualization

google-chartwrapper

1 ответ

Ещё вопросы

Спасибо за ответ. Я обновил вопрос с помощью первых 20 строк моего CSV-файла

WhiteHat · Accepted Answer · 2018-10-17T09-15-00.000Z

опция explorer поддерживается только непрерывной осью.

Для непрерывной оси, установите тип столбца данных к одному из: number, date, datetime или timeofday.
Для дискретной оси установите тип столбца данных в string.

см. → дискретный vs непрерывный

при использовании arrayToDataTable с образцами данных csv,
для первого типа столбца по умолчанию устанавливается string.
(обратите внимание: new ключевое слово не требуется с arrayToDataTable, это статический метод)

мы можем преобразовать первый столбец в настоящую дату, чтобы включить опцию explorer.

arrayData = arrayData.map(function (row) {
  return [
    new Date(row[0]),
    row[1]
  ];
});

см. следующий рабочий фрагмент...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var csvString = 'Date,Total\n9-Oct-17,103173\n10-Oct-17,103377\n11-Oct-17,103903\n12-Oct-17,103644\n13-Oct-17,103511\n14-Oct-17,103511\n15-Oct-17,103511\n16-Oct-17,103541\n17-Oct-17,103636\n18-Oct-17,103868\n19-Oct-17,104419\n20-Oct-17,104770\n21-Oct-17,104770\n22-Oct-17,104770\n23-Oct-17,104748\n24-Oct-17,104986\n25-Oct-17,104994\n26-Oct-17,105246\n27-Oct-17,105424\n';
  var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar});
  arrayData = arrayData.map(function (row) {
    return [
      new Date(row[0]),
      row[1]
    ];
  });
  var data = google.visualization.arrayToDataTable(arrayData);
  var options = {
    hAxis: {
      title: 'Date'
    },
    vAxis: {
      minValue: 0,
      title: 'Total'
    },
    backgroundColor: '#f1f8e9',
    lineWidth: 0.7,
    chartArea: {
      height: '100%',
      width: '100%',
      top: 12,
      right: 24,
      bottom: 48,
      left: 72
    },
    explorer: {
      axis: 'horizontal',
      keepInBounds: true,
      maxZoomIn: 4.0
    }
  }
  chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  chart.draw(data, options);
});

<script src="/jquery.min.js"></script>
<script src="/jquery.csv-0.71.min.js"></script>
<script src="/loader.js"></script>
<div id="chart_div"></div>

note: jsapi больше не должен использоваться для загрузки библиотеки, вместо этого используйте loader.js.

в соответствии с примечаниями к выпуску...

Версия Google Charts, которая остается доступной через загрузчик jsapi не обновляется постоянно. С этого момента вы loader.js использовать новый gstatic loader.js.

это изменит только оператор load, см. выше фрагмент...

РЕДАКТИРОВАТЬ

добавив обратно функцию $.get, фрагмент должен быть следующим:

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  $.get('mil.csv', function(csvString) {
    var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar});
    arrayData = arrayData.map(function (row) {
      return [
        new Date(row[0]),
        row[1]
      ];
    });
    var data = google.visualization.arrayToDataTable(arrayData);
    var options = {
      hAxis: {
        title: 'Date'
      },
      vAxis: {
        minValue: 0,
        title: 'Total'
      },
      backgroundColor: '#f1f8e9',
      lineWidth: 0.7,
      chartArea: {
        height: '100%',
        width: '100%',
        top: 12,
        right: 24,
        bottom: 48,
        left: 72
      },
      explorer: {
        axis: 'horizontal',
        keepInBounds: true,
        maxZoomIn: 4.0
      }
    }
    chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  }, 'text');    
});

Спасибо за ваш пост WhiteHat. Как я уже упоминал, я новичок в JS и изо всех сил пытаюсь включить загрузку файла CSV, используя ваш пример. Сможете ли вы изменить свой ответ, включив в него загрузку файла CSV? Очень признателен.
конечно, см. РЕДАКТИРОВАТЬ выше ...