谷歌折线图滚动/缩放问题答案

【问题标题】：Google linechart scrolling/zoom issue谷歌折线图滚动/缩放问题
【发布时间】：2018-10-16 05:20:49
【问题描述】：

我是 JavaScript 新手。我试图让滚动为谷歌线图工作，但我得到的只是一个静态图，没有滚动。我正在使用我在以下链接中找到的示例，该示例适用于示例中定义的数据集，但是当我尝试从 CSV 文件加载数据时，则只是静态图。

    <html>

    <head>
        <!--Load the AJAX API-->
        <script type="text/javascript" src="https://www.google.com/jsapi"></script>
        <script src="http://code.jquery.com/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

【问题讨论】：

感谢您的回复。我已经用我的 csv 文件的前 20 行更新了问题

标签： javascript charts google-visualization

【解决方案1】：

explorer 选项仅受连续轴支持。

对于连续轴，将数据列类型设置为以下之一：number、date、datetime 或 timeofday。
对于离散轴，将数据列类型设置为string。

见 --> discrete vs continuous

将arrayToDataTable 与样本 csv 数据一起使用时，
第一列类型默认设置为string。
（注意：arrayToDataTable 不需要 new 关键字，它是一个静态方法）

我们可以将第一列转换为真实日期以启用explorer 选项。

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

请参阅以下工作 sn-p...

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="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/0.71/jquery.csv-0.71.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

注意：jsapi 不应再用于加载库，请改用loader.js。

根据release notes...

通过jsapi 加载程序仍然可用的 Google 图表版本不再持续更新。从现在开始请使用新的 gstatic loader.js。

这只会改变load语句，见上面的sn-p...

编辑

加回$.get函数，sn-p应该如下...

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 文件加载？非常感谢。
感谢您的帮助。