Question

我有一个动态生成的数据，我使用饼图显示默认值。现在我想在选择更改时添加下拉选择，必须根据下拉值显示新图表。

<select id="charts" onchange="change_Even(event)">
  <option value="" disabled selected>Select Chart Type</option>
  <option value="LineChart">LineChart</option>
  <option value="BarChart">BarChart</option>
  <option value="ColumnChart">ColumnChart</option>
</select>

现在下面是我的谷歌图表代码：

google.charts.load('current', { 'packages': ['corechart'] });
google.charts.setOnLoadCallback(drawChartdata());

function drawChartdata() {               
  var ex = document.getElementById("dpddashR");
  var clOptions = ex.options[ex.selectedIndex].value;
  var clOptions1 = ex.options[ex.selectedIndex].text;
  var dtf = document.getElementById("frm_date").value;
  var dtt = document.getElementById("to_date").value;

  var link2 = "http://xxx.xxx.x.xx:xx/WAIT.svc/Report";

  var jsonData = $.ajax({
    type: 'GET',
    url: link2,
    data: "Loc_=" + clOptions + "&cli_=" + sess.Id + "&Name_=" + clOptions1 + 
      "&MachineId_=0&frmDate_=" + dtf + "&toDate_=" + dtt + "", dataType: 'json',
  }).done(function (results) {    
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'time');
    data.addColumn('number', 'Amount');
    data.addRows(results.length);

    for (i = 0; i < results.length; i++) {
      data.setValue(i, 0, results[i]["time"]);
      data.setValue(i, 1, parseInt(results[i]["Amount"]));
    }

    var chart = new google.visualization.PieChart(document.getElementById('piechart'));
    chart.draw(data, { width: 600, height: 240, is3D: true, title: '' }); 
  });
}

所以在选择更改时必须触发drawChartdata（）并根据选择它必须显示聊天类型，如果使用选择饼图它必须显示饼图，如果他选择条形图它有显示条形图

Answer 1

使用select的值来创建图表...

var chartType = document.getElementById('charts').value;

var chart = new google.visualization[chartType](document.getElementById('piechart'));

如何使用谷歌图表在下拉列表选择中获取所选图表类型

1 个答案: