Question

我是javascript新手。我正在尝试为Google Linechart进行滚动工作，但是我得到的只是一个静态图形，没有滚动。我使用的是在以下链接中找到的示例，该示例对于示例中的已定义数据集非常有效，但是当我尝试从CSV文件中加载数据时，仅是静态图形。

Zoom Google Line chart

    <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

Answer 1

explorer选项仅受连续轴支持。

对于连续轴，将数据列类型设置为number，date，datetime或timeofday中的一种。
对于离散轴，将数据列类型设置为string。

请参阅-> discrete vs continuous

将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="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 Charts版本不再被一致更新。从现在开始，请使用新的静态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');    
});

Google线图滚动/缩放问题

1 个答案: