Question

我试图制作Google图表，我在重叠的日期收到错误。我不知道如何使它工作。列A必须定义为columnfilterindex ...

之前有人这样做吗？

    <html>
  <head>
    <!--Load the AJAX API-->


 </head>

<body style="font-family: Arial;border: 0 none;">
        <div id="dashboard" style="width:1300px;overflow:scroll;">
            <div id="chart" style="position: relative; width: 1300px; height: 400px;"></div>
            <div id="control" style="position: relative; width: 1300px; height: 100px;"></div>
        </div>

        <div id="junk_div" style="display: none;"></div>


<script type="text/javascript">

var data;
var dataTable;
var dashboard;

 google.load("jquery", "1.4.2");  
google.load("visualization", "1.1", {packages:["controls,corechart, table"]});
google.setOnLoadCallback(drawVisualization);

function setupData(){
  var control = new google.visualization.ControlWrapper({
        'controlType': 'ChartRangeFilter',
        'containerId': 'control',
        'options': {
            // Filter by the date axis.
            'filterColumnIndex': 0,
            'ui': {
               // 'chartType': 'BarChart',
                'chartOptions': {
                    'chartArea': {'width': '90%'},
                 'hAxis': {'format': 'dd/MM/yyyy'}
                },
                'chartView': {
                    'columns': [ 0, 1, 3]
                }
            }
        },


    });

    //then reverse the process in the ChartWrapper's view.columns:

    var chart = new google.visualization.ChartWrapper({
        'chartType': 'ScatterChart',
        'containerId': 'chart',
        'options': {
                    'filterColumnIndex': 0,

        'pointSize': 2,
            // Use the same chart area width as the control for axis alignment.
            'chartArea': {'height': '80%', 'width': '90%'},
            'hAxis': {'format': 'dd/MM/yyyy'},
           // 'vAxis': {'viewWindow': {'min': 0, 'max': 20}},
            'legend': {'position': 'none'}
        },
        view: {
            columns: [ 0, 1, 3]
        }
    });
 //   console.log('label: ' + data.getColumnLabel(0));
    dashboard.bind(control, chart);
    dashboard.draw(data);

}

function drawVisualization() {

  dataTable = new google.visualization.DataTable();

//  var dateFormatter = new google.visualization.DateFormat({pattern: 'dd/MM/yyyy'});
//  dateFormatter.format(data, 0);
//  data.addColumn('date', 0); 
  dashboard = new google.visualization.Dashboard(document.getElementById('dashboard'));

  var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1MnnVAMNIbhNZbNXfGWl4iLN8ebCXnybo4usIQOSBcDQ/edit#gid=0');

  query.setQuery("select  A,B,C,D where A is not null");
  query.send(handleQueryResponse);

}



function handleQueryResponse(response) {
    if (response.isError()) {
      alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
    return;
    }

    data = response.getDataTable();

    setupData();
}

</script>

</body>

</html>

Answer 1

对于初学者，建议使用loader.js加载图表库
与较旧的jsapi

相对

接下来，每个包都需要单独列出...
packages: ['controls', 'corechart', 'table']

除此之外，这样的事情应该有效......

＆＃13;

google.charts.load('current', {
  callback: function () {
    var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1MnnVAMNIbhNZbNXfGWl4iLN8ebCXnybo4usIQOSBcDQ/edit#gid=0');
    query.setQuery('select A,B,C,D where A is not null');
    query.send(function (response) {
      if (response.isError()) {
        console.log('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
        return;
      }

      var control = new google.visualization.ControlWrapper({
        controlType: 'ChartRangeFilter',
        containerId: 'control',
        options: {
          filterColumnIndex: 0,
          ui: {
            chartOptions: {
              chartArea: {width: '90%'},
              hAxis: {format: 'dd/MM/yyyy'}
            },
            chartView: {
              columns: [ 0, 1, 3]
            }
          }
        }
      });

      var chart = new google.visualization.ChartWrapper({
        chartType: 'ScatterChart',
        containerId: 'chart',
        options: {
          filterColumnIndex: 0,
          pointSize: 2,
          chartArea: {height: '80%', 'width': '90%'},
          hAxis: {format: 'dd/MM/yyyy'},
          legend: {position: 'none'}
        },
        view: {
          columns: [ 0, 1, 3]
        }
      });

      dashboard = new google.visualization.Dashboard(document.getElementById('dashboard'));
      dashboard.bind(control, chart);
      dashboard.draw(response.getDataTable());
    });
  },
  packages: ['controls', 'corechart', 'table']
});

＆＃13;

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard" style="width:1300px;overflow:scroll;">
  <div id="chart" style="position: relative; width: 1300px; height: 400px;"></div>
  <div id="control" style="position: relative; width: 1300px; height: 100px;"></div>
</div>

＆＃13;

Google图表：日期格式

1 个答案: