javascript - Google Visualization 表格图表点击并返回行/列值不适用于启用分页

标签 javascript charts google-visualization

我一直在使用来自 this posting 的代码确定我在 Google 可视化表中的坐标位置。在没有分页的情况下在 table 上工作得很好。

启用分页后,坐标在单击第 1 页内的单元格时有效,但在激活第 2 页后停止工作。

var table = new google.visualization.ChartWrapper({
    chartType: 'Table',
    containerId: 'div_table',
    options: {
      allowHtml: true,
      page: 'enable', //THIS HAS BEEN ADDED
      pageSize: '3'      
    }
});

关于如何使第 2 页上的坐标起作用的任何线索?

通过单击第 2 页上的第一条记录,我需要知道我在第 3 行第 x 列中。一如既往的感谢!

这是我的完整代码示例(原始)。

google.charts.load('current', {
  'packages': ['corechart', 'table', 'gauge', 'controls', 'charteditor']
});

renderChart_onPageLoad();

function renderChart_onPageLoad() {
  google.charts.setOnLoadCallback(function() {
    drawTable();
  }); //END setOnLoadCallback
} //END function renderChart_onEvent

function drawTable() {
  var jsonArray = jsonDataArray_1to1(json);

  //Modify header row to include id and label
  jsonArray = arrayHeaderRow_id_label_date(jsonArray);
  console.log('jsonArray'); console.log(jsonArray);

  var data = google.visualization.arrayToDataTable(jsonArray, false); // 'false' means that the first row contains labels, not data.
  //console.log('data');
  //console.log(data);

  var dashboard = new google.visualization.Dashboard(document.getElementById('div_dashboard'));

  var categoryPicker1 = new google.visualization.ControlWrapper({
    'controlType': 'CategoryFilter',
    'containerId': 'div_categoryPicker1',
    'matchType': 'any',
    'options': {
      'filterColumnIndex': 0, //Column used in control
      'ui': {
        //'label': 'Actual State:',
        //'labelSeparator': ':',
        'labelStacking': 'vertical',
        'selectedValuesLayout': 'belowWrapping',
        'allowTyping': false,
        'allowMultiple': false,
        'allowNone': true
      }
    }
  });

  var table = new google.visualization.ChartWrapper({
    chartType: 'Table',
    containerId: 'div_table',
    options: {
      allowHtml: true,
      page: 'enable',
      pageSize: '3'      
    }
  });

  dashboard.bind([categoryPicker1], [table]);
  dashboard.draw(data);

  google.visualization.events.addListener(table, 'ready', function() {
    var container = document.getElementById(table.getContainerId());
    Array.prototype.forEach.call(container.getElementsByTagName('TD'), function(cell) {
      cell.addEventListener('click', selectCell);
    });

    function selectCell(sender) {
      var cell = sender.target;
      var row = cell.closest('tr');
      document.getElementById('output1').innerHTML = "Row: " + (row.rowIndex - 1) + " Column: " + cell.cellIndex;

      //NEW additional requirements

      var tableDataView = table.getDataTable();

      var selectedRow = row.rowIndex - 1;  // adjust for header row (-1)
      var selectedCol = cell.cellIndex;

      document.getElementById('output2').innerHTML = "selectedRow: " + selectedRow + " selectedCol: " + selectedCol;

      var colID = tableDataView.getColumnId(selectedCol);
      var colLabel = tableDataView.getColumnLabel(selectedCol);

      document.getElementById('output3').innerHTML = "colID: " + colID + " colLabel: " + colLabel;
    }

  });

}





//Library

function jsonDataArray_1to1(json) {
  //DYNAMIC JSON ARRAY

  var dataArray_cln = [];

  //A. The desired table requires the fixed columns of ..... to ..... these are directly taken from the JSON.
  var dataArray_keys = Object.keys(json[0]);

  dataArray_cln.push(dataArray_keys);

  //Add rows 1 to json.length with null values
  var dataArray_rows = json.length;
  var dataArray_cols = dataArray_keys.length;

  for (i = 0; i < dataArray_rows; i++) {
    dataArray_cln.push(Array(dataArray_cols).fill(null));
  }

  //Update array from json data
  for (i = 0; i < dataArray_rows; i++) {
    //[i + 1] because row 0 is the header, push begins with row 1
    //dataArray_cln[row][col]

    //Content in row "i" is positioned into dataArray_cln[row][col] incrementing "j" to pull each key name from dataArray_keys
    for (var j = 0; j < dataArray_keys.length; j++) {
      eval('dataArray_cln[i + 1][' + j + '] = json[i].' + dataArray_keys[j]);
    }
  }

  //console.log(dataArray_cln);
  return dataArray_cln;
}

function arrayHeaderRow_id_label_date(arr) {
  for (var i = 0; i < arr[0].length; i++) {
    var valueOrig = arr[0][i];
    var valueNew;
    switch (true) {
      case valueOrig === 'wd':
        valueNew = JSON.parse('{"id":"' + valueOrig + '", "label":"' + valueOrig + '", "type": "date"}');
        break;
      default:
        valueNew = JSON.parse('{"id":"' + valueOrig + '", "label": "' + valueOrig + '"}');
    }
    arr[0][i] = valueNew;
  }
  return arr;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id='div_dashboard'>
  <div id='div_categoryPicker1'></div>
  <div id='div_table'></div>
</div>

<div id="output1"></div><br/>
<div id="output2"></div><br/>
<div id="output3"></div><br/>

<script>
  var json = [{
      "division": "GS",
      "m1": 100.000000,
      "m2": 100.000000,
      "m3": null,
      "m4": null,
      "m5": null,
      "m6": null,
      "m7": null,
      "m8": null,
      "m9": null,
      "m10": null,
      "m11": null,
      "m12": null,
    },
    {
      "division": "GS",
      "m1": 100.000000,
      "m2": 90.000000,
      "m3": null,
      "m4": null,
      "m5": null,
      "m6": null,
      "m7": null,
      "m8": null,
      "m9": null,
      "m10": null,
      "m11": null,
      "m12": null,
    },
    {
      "division": "PS",
      "m1": null,
      "m2": null,
      "m3": 100.000000,
      "m4": null,
      "m5": 100.000000,
      "m6": 100.000000,
      "m7": 75.000000,
      "m8": null,
      "m9": null,
      "m10": null,
      "m11": null,
      "m12": null,
    },
    {
      "division": "PS",
      "m1": null,
      "m2": null,
      "m3": 100.000000,
      "m4": 100.000000,
      "m5": 100.000000,
      "m6": 100.000000,
      "m7": 80.000000,
      "m8": null,
      "m9": null,
      "m10": null,
      "m11": null,
      "m12": null,
    },
    {
      "division": "PS",
      "m1": null,
      "m2": null,
      "m3": 100.000000,
      "m4": 100.000000,
      "m5": 100.000000,
      "m6": 100.000000,
      "m7": 80.000000,
      "m8": null,
      "m9": null,
      "m10": null,
      "m11": null,
      "m12": null,
    }, {
      "division": "PS",
      "m1": null,
      "m2": null,
      "m3": 100.000000,
      "m4": 100.000000,
      "m5": 100.000000,
      "m6": 100.000000,
      "m7": 80.000000,
      "m8": null,
      "m9": null,
      "m10": null,
      "m11": null,
      "m12": null,
    }, {
      "division": "PS",
      "m1": null,
      "m2": null,
      "m3": 100.000000,
      "m4": 100.000000,
      "m5": 100.000000,
      "m6": 100.000000,
      "m7": 80.000000,
      "m8": null,
      "m9": null,
      "m10": null,
      "m11": null,
      "m12": null,
    }
  ];

</script>

最佳答案

坐标在下一页停止工作,
因为分配了 'click' 事件的单元格,
已被新细胞取代。
(当通过单击列标题对表格进行排序时会发生同样的事情)

在每页和每次排序后启用坐标,
监听表的 'page''sort' 事件,
然后在新单元格上重新应用 'click' 事件。

页面事件具有所选页面的属性。
保存页码并乘以页面大小,
为显示的页面获取正确的行索引。

以下是相关代码...

google.visualization.events.addListener(table, 'ready', function() {
  // initialize page number and size
  var page = 0;
  var pageSize = 10;
  if (table.getOption('page') === 'enable') {
    page = table.getOption('startPage');
    pageSize = table.getOption('pageSize');
  }
  enableCoordinates();

  // page event
  google.visualization.events.addListener(table.getChart(), 'page', function(sender) {
    page = sender.page;  // save current page
    enableCoordinates();
  });

  // sort event
  google.visualization.events.addListener(table.getChart(), 'sort', function() {
    page = 0;  // reset back to first page
    enableCoordinates();
  });

  function enableCoordinates() {
    var container = document.getElementById(table.getContainerId());
    Array.prototype.forEach.call(container.getElementsByTagName('TD'), function(cell) {
      cell.addEventListener('click', selectCell);
    });
  }

  function selectCell(sender) {
    var cell = sender.target;
    var row = cell.closest('tr');
    document.getElementById('output1').innerHTML = "Row: " + (row.rowIndex - 1) + " Column: " + cell.cellIndex;

    //NEW additional requirements

    var tableDataView = table.getDataTable();

    var selectedRow = row.rowIndex - 1;  // adjust for header row (-1)
    selectedRow = (page * pageSize) + selectedRow;  // adjust for page number
    var selectedCol = cell.cellIndex;

    document.getElementById('output2').innerHTML = "selectedRow: " + selectedRow + " selectedCol: " + selectedCol;

    var colID = tableDataView.getColumnId(selectedCol);
    var colLabel = tableDataView.getColumnLabel(selectedCol);

    document.getElementById('output3').innerHTML = "colID: " + colID + " colLabel: " + colLabel;
  }
});

请参阅以下工作片段...

var json = [{
    "division": "GS",
    "m1": 100.000000,
    "m2": 100.000000,
    "m3": null,
    "m4": null,
    "m5": null,
    "m6": null,
    "m7": null,
    "m8": null,
    "m9": null,
    "m10": null,
    "m11": null,
    "m12": null,
  },
  {
    "division": "GS",
    "m1": 100.000000,
    "m2": 90.000000,
    "m3": null,
    "m4": null,
    "m5": null,
    "m6": null,
    "m7": null,
    "m8": null,
    "m9": null,
    "m10": null,
    "m11": null,
    "m12": null,
  },
  {
    "division": "PS",
    "m1": null,
    "m2": null,
    "m3": 100.000000,
    "m4": null,
    "m5": 100.000000,
    "m6": 100.000000,
    "m7": 75.000000,
    "m8": null,
    "m9": null,
    "m10": null,
    "m11": null,
    "m12": null,
  },
  {
    "division": "PS",
    "m1": null,
    "m2": null,
    "m3": 100.000000,
    "m4": 100.000000,
    "m5": 100.000000,
    "m6": 100.000000,
    "m7": 80.000000,
    "m8": null,
    "m9": null,
    "m10": null,
    "m11": null,
    "m12": null,
  },
  {
    "division": "PS",
    "m1": null,
    "m2": null,
    "m3": 100.000000,
    "m4": 100.000000,
    "m5": 100.000000,
    "m6": 100.000000,
    "m7": 80.000000,
    "m8": null,
    "m9": null,
    "m10": null,
    "m11": null,
    "m12": null,
  }, {
    "division": "PS",
    "m1": null,
    "m2": null,
    "m3": 100.000000,
    "m4": 100.000000,
    "m5": 100.000000,
    "m6": 100.000000,
    "m7": 80.000000,
    "m8": null,
    "m9": null,
    "m10": null,
    "m11": null,
    "m12": null,
  }, {
    "division": "PS",
    "m1": null,
    "m2": null,
    "m3": 100.000000,
    "m4": 100.000000,
    "m5": 100.000000,
    "m6": 100.000000,
    "m7": 80.000000,
    "m8": null,
    "m9": null,
    "m10": null,
    "m11": null,
    "m12": null,
  }
];

google.charts.load('current', {
  packages: ['corechart', 'table', 'gauge', 'controls', 'charteditor']
}).then(drawTable);

function drawTable() {
  var jsonArray = jsonDataArray_1to1(json);

  //Modify header row to include id and label
  jsonArray = arrayHeaderRow_id_label_date(jsonArray);

  var data = google.visualization.arrayToDataTable(jsonArray);

  var dashboard = new google.visualization.Dashboard(document.getElementById('div_dashboard'));

  var categoryPicker1 = new google.visualization.ControlWrapper({
    'controlType': 'CategoryFilter',
    'containerId': 'div_categoryPicker1',
    'matchType': 'any',
    'options': {
      'filterColumnIndex': 0, //Column used in control
      'ui': {
        'labelStacking': 'vertical',
        'selectedValuesLayout': 'belowWrapping',
        'allowTyping': false,
        'allowMultiple': false,
        'allowNone': true
      }
    }
  });

  var table = new google.visualization.ChartWrapper({
    chartType: 'Table',
    containerId: 'div_table',
    options: {
      allowHtml: true,
      page: 'enable',
      pageSize: '3'
    }
  });

  dashboard.bind([categoryPicker1], [table]);
  dashboard.draw(data);

  google.visualization.events.addListener(table, 'ready', function() {
    // initialize page number and size
    var page = 0;
    var pageSize = 10;
    if (table.getOption('page') === 'enable') {
      page = table.getOption('startPage');
      pageSize = table.getOption('pageSize');
    }
    enableCoordinates();

    // page event
    google.visualization.events.addListener(table.getChart(), 'page', function(sender) {
      page = sender.page;  // save current page
      enableCoordinates();
    });

    // sort event
    google.visualization.events.addListener(table.getChart(), 'sort', function() {
      page = 0;  // reset back to first page
      enableCoordinates();
    });

    function enableCoordinates() {
      var container = document.getElementById(table.getContainerId());
      Array.prototype.forEach.call(container.getElementsByTagName('TD'), function(cell) {
        cell.addEventListener('click', selectCell);
      });
    }

    function selectCell(sender) {
      var cell = sender.target;
      var row = cell.closest('tr');
      document.getElementById('output1').innerHTML = "Row: " + (row.rowIndex - 1) + " Column: " + cell.cellIndex;

      //NEW additional requirements

      var tableDataView = table.getDataTable();

      var selectedRow = row.rowIndex - 1;  // adjust for header row (-1)
      selectedRow = (page * pageSize) + selectedRow;  // adjust for page number
      var selectedCol = cell.cellIndex;

      document.getElementById('output2').innerHTML = "selectedRow: " + selectedRow + " selectedCol: " + selectedCol;

      var colID = tableDataView.getColumnId(selectedCol);
      var colLabel = tableDataView.getColumnLabel(selectedCol);

      document.getElementById('output3').innerHTML = "colID: " + colID + " colLabel: " + colLabel;
    }

  });
}





//Library

function jsonDataArray_1to1(json) {
  //DYNAMIC JSON ARRAY

  var dataArray_cln = [];

  //A. The desired table requires the fixed columns of ..... to ..... these are directly taken from the JSON.
  var dataArray_keys = Object.keys(json[0]);

  dataArray_cln.push(dataArray_keys);

  //Add rows 1 to json.length with null values
  var dataArray_rows = json.length;
  var dataArray_cols = dataArray_keys.length;

  for (i = 0; i < dataArray_rows; i++) {
    dataArray_cln.push(Array(dataArray_cols).fill(null));
  }

  //Update array from json data
  for (i = 0; i < dataArray_rows; i++) {
    //[i + 1] because row 0 is the header, push begins with row 1
    //dataArray_cln[row][col]

    //Content in row "i" is positioned into dataArray_cln[row][col] incrementing "j" to pull each key name from dataArray_keys
    for (var j = 0; j < dataArray_keys.length; j++) {
      eval('dataArray_cln[i + 1][' + j + '] = json[i].' + dataArray_keys[j]);
    }
  }

  //console.log(dataArray_cln);
  return dataArray_cln;
}

function arrayHeaderRow_id_label_date(arr) {
  for (var i = 0; i < arr[0].length; i++) {
    var valueOrig = arr[0][i];
    var valueNew;
    switch (true) {
      case valueOrig === 'wd':
        valueNew = JSON.parse('{"id":"' + valueOrig + '", "label":"' + valueOrig + '", "type": "date"}');
        break;
      default:
        valueNew = JSON.parse('{"id":"' + valueOrig + '", "label": "' + valueOrig + '"}');
    }
    arr[0][i] = valueNew;
  }
  return arr;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="div_dashboard">
  <div id="div_categoryPicker1"></div>
  <div id="div_table"></div>
</div>

<div id="output1"></div><br/>
<div id="output2"></div><br/>
<div id="output3"></div><br/>


编辑——排序

排序时,底层数据表未排序,
只是屏幕上的图表。
之后,屏幕上显示的行索引将与数据表中的行索引不匹配。

为了同步两者从数据表中获取数据,
你必须使用图表方法 --> getSortInfo()

getSortInfo() 返回具有以下属性的对象...

{"column":0,"ascending":false,"sortedIndexes":[6,5,4,3,2,1,0]}

然后我们可以使用选中的行,
"sortedIndexes"中拉取对应的数据表行索引。

selectedRow = sortInfo.sortedIndexes[selectedRow];

请参阅以下工作片段...

var json = [{
    "division": "GS1",
    "m1": 100.000000,
    "m2": 100.000000,
    "m3": null,
    "m4": null,
    "m5": null,
    "m6": null,
    "m7": null,
    "m8": null,
    "m9": null,
    "m10": null,
    "m11": null,
    "m12": null,
  },
  {
    "division": "GS2",
    "m1": 100.000000,
    "m2": 90.000000,
    "m3": null,
    "m4": null,
    "m5": null,
    "m6": null,
    "m7": null,
    "m8": null,
    "m9": null,
    "m10": null,
    "m11": null,
    "m12": null,
  },
  {
    "division": "PS1",
    "m1": null,
    "m2": null,
    "m3": 100.000000,
    "m4": null,
    "m5": 100.000000,
    "m6": 100.000000,
    "m7": 75.000000,
    "m8": null,
    "m9": null,
    "m10": null,
    "m11": null,
    "m12": null,
  },
  {
    "division": "PS2",
    "m1": null,
    "m2": null,
    "m3": 100.000000,
    "m4": 100.000000,
    "m5": 100.000000,
    "m6": 100.000000,
    "m7": 80.000000,
    "m8": null,
    "m9": null,
    "m10": null,
    "m11": null,
    "m12": null,
  },
  {
    "division": "PS3",
    "m1": null,
    "m2": null,
    "m3": 100.000000,
    "m4": 100.000000,
    "m5": 100.000000,
    "m6": 100.000000,
    "m7": 80.000000,
    "m8": null,
    "m9": null,
    "m10": null,
    "m11": null,
    "m12": null,
  }, {
    "division": "PS4",
    "m1": null,
    "m2": null,
    "m3": 100.000000,
    "m4": 100.000000,
    "m5": 100.000000,
    "m6": 100.000000,
    "m7": 80.000000,
    "m8": null,
    "m9": null,
    "m10": null,
    "m11": null,
    "m12": null,
  }, {
    "division": "PS5",
    "m1": null,
    "m2": null,
    "m3": 100.000000,
    "m4": 100.000000,
    "m5": 100.000000,
    "m6": 100.000000,
    "m7": 80.000000,
    "m8": null,
    "m9": null,
    "m10": null,
    "m11": null,
    "m12": null,
  }
];

google.charts.load('current', {
  packages: ['corechart', 'table', 'gauge', 'controls', 'charteditor']
}).then(drawTable);

function drawTable() {
  var jsonArray = jsonDataArray_1to1(json);

  //Modify header row to include id and label
  jsonArray = arrayHeaderRow_id_label_date(jsonArray);

  var data = google.visualization.arrayToDataTable(jsonArray);

  var dashboard = new google.visualization.Dashboard(document.getElementById('div_dashboard'));

  var categoryPicker1 = new google.visualization.ControlWrapper({
    'controlType': 'CategoryFilter',
    'containerId': 'div_categoryPicker1',
    'matchType': 'any',
    'options': {
      'filterColumnIndex': 0, //Column used in control
      'ui': {
        'labelStacking': 'vertical',
        'selectedValuesLayout': 'belowWrapping',
        'allowTyping': false,
        'allowMultiple': false,
        'allowNone': true
      }
    }
  });

  var table = new google.visualization.ChartWrapper({
    chartType: 'Table',
    containerId: 'div_table',
    options: {
      allowHtml: true,
      page: 'enable',
      pageSize: '3'
    }
  });

  dashboard.bind([categoryPicker1], [table]);
  dashboard.draw(data);

  google.visualization.events.addListener(table, 'ready', function() {
    // initialize page number and size
    var page = 0;
    var pageSize = 10;
    if (table.getOption('page') === 'enable') {
      page = table.getOption('startPage');
      pageSize = table.getOption('pageSize');
    }
    enableCoordinates();

    // page event
    google.visualization.events.addListener(table.getChart(), 'page', function(sender) {
      page = sender.page;  // save current page
      enableCoordinates();
    });

    // sort event
    google.visualization.events.addListener(table.getChart(), 'sort', function() {
      page = 0;  // reset back to first page
      enableCoordinates();
    });

    function enableCoordinates() {
      var container = document.getElementById(table.getContainerId());
      Array.prototype.forEach.call(container.getElementsByTagName('TD'), function(cell) {
        cell.addEventListener('click', selectCell);
      });
    }

    function selectCell(sender) {
      var cell = sender.target;
      var row = cell.closest('tr');
      document.getElementById('output1').innerHTML = "Row: " + (row.rowIndex - 1) + " Column: " + cell.cellIndex;

      //NEW additional requirements

      var tableDataView = table.getDataTable();

      var selectedRow = row.rowIndex - 1;  // adjust for header row (-1)
      selectedRow = (page * pageSize) + selectedRow;  // adjust for page number
      var sortInfo = table.getChart().getSortInfo();  // save sorted info
      if (sortInfo.sortedIndexes !== null) {
        selectedRow = sortInfo.sortedIndexes[selectedRow];
      }
      var selectedCol = cell.cellIndex;

      document.getElementById('output2').innerHTML = "selectedRow: " + selectedRow + " selectedCol: " + selectedCol;

      var colID = tableDataView.getColumnId(selectedCol);
      var colLabel = tableDataView.getColumnLabel(selectedCol);

      document.getElementById('output3').innerHTML = "colID: " + colID + " colLabel: " + colLabel;

      document.getElementById('output4').innerHTML = tableDataView.getValue(selectedRow, 0);
    }

  });
}

//Library

function jsonDataArray_1to1(json) {
  //DYNAMIC JSON ARRAY

  var dataArray_cln = [];

  //A. The desired table requires the fixed columns of ..... to ..... these are directly taken from the JSON.
  var dataArray_keys = Object.keys(json[0]);

  dataArray_cln.push(dataArray_keys);

  //Add rows 1 to json.length with null values
  var dataArray_rows = json.length;
  var dataArray_cols = dataArray_keys.length;

  for (i = 0; i < dataArray_rows; i++) {
    dataArray_cln.push(Array(dataArray_cols).fill(null));
  }

  //Update array from json data
  for (i = 0; i < dataArray_rows; i++) {
    //[i + 1] because row 0 is the header, push begins with row 1
    //dataArray_cln[row][col]

    //Content in row "i" is positioned into dataArray_cln[row][col] incrementing "j" to pull each key name from dataArray_keys
    for (var j = 0; j < dataArray_keys.length; j++) {
      eval('dataArray_cln[i + 1][' + j + '] = json[i].' + dataArray_keys[j]);
    }
  }

  //console.log(dataArray_cln);
  return dataArray_cln;
}

function arrayHeaderRow_id_label_date(arr) {
  for (var i = 0; i < arr[0].length; i++) {
    var valueOrig = arr[0][i];
    var valueNew;
    switch (true) {
      case valueOrig === 'wd':
        valueNew = JSON.parse('{"id":"' + valueOrig + '", "label":"' + valueOrig + '", "type": "date"}');
        break;
      default:
        valueNew = JSON.parse('{"id":"' + valueOrig + '", "label": "' + valueOrig + '"}');
    }
    arr[0][i] = valueNew;
  }
  return arr;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="div_dashboard">
  <div id="div_categoryPicker1"></div>
  <div id="div_table"></div>
</div>

<div id="output1"></div><br/>
<div id="output2"></div><br/>
<div id="output3"></div><br/>
<div id="output4"></div><br/>

关于javascript - Google Visualization 表格图表点击并返回行/列值不适用于启用分页,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54449831/

相关文章:

javascript - 函数的无命名参数会自动插入到具有不同参数名称的子函数中

javascript - 如何获得几乎递增的整数序列

java - JfreeChart : changing axis line angle on polar chart

javascript - 将谷歌图表另存为 pdf

javascript - 使用 ES6 和 Axios 从全局函数提供数组对象时出现的问题

javascript - Knockout 无法处理特定函数中的绑定(bind)

javascript - 从 JSON 获取值到 JavaScript

php - Google 图表 - 获取线性趋势线的方程式

charts - Google 图表的 comboChart 中的辅助轴标题不起作用

css - 在 Jade 中加载谷歌图表