Question

我有一个图表，允许用户选择一个选项来与全州平均值进行比较。图表工作正常，直到我使用stringify方法创建注释 - 列数根据选择而变化。您对如何保留此功能以及仍有数据标签有什么建议？

<html>
<head>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load('visualization', '1', {packages:['table', 'corechart']});
</script>

<script type='text/javascript'>
google.setOnLoadCallback(initialize);
function initialize() {drawVisualizations();
function drawVisualizations() {drawChart(); drawTable();} //drawC();} 

//main chart
function drawChart() {
var dataCap = document.getElementById("selected2").value;
var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1m3ujxzPQJh3haReNDzGGF73Mh6-u6HxyCVPK_5MK2hw/gviz/tq?sheet=Sheet2&range=A1:A5,E1:E5,' + dataCap); query.send(handleQueryResponse);
}

function handleQueryResponse(response) {
  var data = response.getDataTable();
   var options = {
    'title':'College Readiness',
    'subTitle':'Test',
    'titleTextStyle': {fontSize: '24', color: 'teal', fontName: '"Arial"', isHTML: true},
    hAxis: {'title': 'Percent of Students Ready', 'textStyle': {color: 'gray', fontSize: '9'}, 'minValue': '0', 'maxValue':'1','format': 'percent'},
    vAxis: {'title': 'Academic Year', 'textStyle': {bold: true, fontSize: '16'}, 'minValue': '0', 'maxValue':'1'},
    legend: {'position': 'top', 'maxLines': 5, 'textStyle': {bold: true, fontSize: '16', fontName: "'Arial'"}},
    tooltip: {
    textStyle: {fontName: "'Arial'"}},
        series: {
        0: {pointsVisible: true, color: '#003366'},
        1: {pointsVisible: true, color: '#cc0000'}
    },
  annotations: {
  textStyle: {bold: true,color: '#000000', fontName: "'Arial'"},
  stem:{color: 'none'}
  }};


function handleQueryResponse(response) {var data = response.getDataTable()};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));chart.draw(data, options);}

//current stats sidebar
function drawTable() {
var query2 = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1m3ujxzPQJh3haReNDzGGF73Mh6-u6HxyCVPK_5MK2hw/gviz/tq?sheet=Sheet2&range=A:E');
  query2.send(handleQueryResponse2);
}

function handleQueryResponse2(response) {
var data2 = response.getDataTable();
var options2 = {'sort': 'disable'};
var chart2 = new google.visualization.Table(document.getElementById('data_div'));
    chart2.draw(data2, options2);}
}

</script>

<style type="text/css">
body {font-family: Arial, Helvetica, sans-serif;}
html, body {height: 100%;}
body {text-align: center;}
#chart_div {width: 900px; margin: 20px auto; height: 600px;}
</style>
</head>
<body>
<label for="selected2">You are viewing:</label>
<select id="selected2" onChange="initialize()">
      <option selected value="">Statewide average only</option>
      <option value="B1:B5">Fake University 1 compared to statewide average</option>
      <option value="C1:C5">Fake University 2 compared to statewide average</option>
      <option value="D1:D5">Fake University 3 compared to statewide average</option>
  </select>
<input onClick="window.open('datatest21-data.html')" type="button" value="Download the complete data set" />
<div id="chart_div"></div>
<div id="data_div"></div>
</body>
</html>

这是我正在使用的stringify方法，但它弄乱了上面的代码：

//
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, { calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation"},
2,{ calc: "stringify",
sourceColumn: 2,
type: "string",
role: "annotation" }]);
//

可能是我做错了 - 建议，赞赏。这种编码对我来说是新的。

Answer 1

我现在已经使用设置列工作，但更改值的下拉列表不再有效。我的猜测是，一旦图形转换为DataView（而不是DataTable），它就会成为“只读”＃34;并且交互性丢失了。（此示例使用另一个图表。）我需要一种在选择其他选项时重绘表格的方法。 [代码]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>


<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load('visualization', '1', {packages:['table', 'corechart']});
</script>

<script type='text/javascript'>
google.setOnLoadCallback(initialize);
function initialize() {drawVisualizations(); function drawVisualizations() {drawChart(); drawTable();} //drawC();} 

//main chart
function drawChart() {
var dataCap = document.getElementById("selected2").value;
var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1m3ujxzPQJh3haReNDzGGF73Mh6-u6HxyCVPK_5MK2hw/gviz/tq?sheet=Enrollment&range=' + dataCap); query.send(handleQueryResponse);
}

function handleQueryResponse(response) {
var data = response.getDataTable();
  //
var view = new google.visualization.DataView(data);
view.setColumns([0,1,2,3,
                       {calc: "stringify",
                         sourceColumn: 4,
                         type: "string",
                         role: "annotation"}
                       ]);
                     //
   var options = {
   height: 500,
   chartArea: {'left': '5%'},
   isStacked: true,
   hAxis: {'textStyle': {'fontSize':11}},
   vAxis: {'textStyle': {'fontSize':11}, 'maxValue':110000},
    legend: {'position': 'top', 'maxLines': 5, 'textStyle': {bold: true, fontSize: 11, fontName: '"Arial"'}},
    tooltip: {
    textStyle: {fontName: "'Arial'"}},
        series: {
        0: {color: 'navy'},
        1: {color: 'teal'}
    },
  annotations: {
  textStyle: {bold: true,color: '#000000', fontName: "'Arial'"},
  alwaysOutside: true,
  isHTML: true,
  stemColor: 'none',
  text: 'test'
  }};

var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));chart.draw(view, options);}


//current stats sidebar
function drawTable() {
var dataCap2 = document.getElementById("selected3").value;
var query2 = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1m3ujxzPQJh3haReNDzGGF73Mh6-u6HxyCVPK_5MK2hw/gviz/tq?' + dataCap2);
  query2.send(handleQueryResponse2);
}

function handleQueryResponse2(response) {
var data2 = response.getDataTable();
var options2 = {
    height: 300,
    chartArea: {'left': '5%'},
    hAxis: {'textStyle': {'fontSize':11}},
    vAxis: {'minValue': '0', 'maxValue':'1', 'format':'percent', 'textStyle': {'fontSize':11}},
    legend: {'position': 'top', 'maxLines': 5, 'textStyle': {bold: true, fontSize: 11, fontName: '"Arial"'}},
    tooltip: {
    textStyle: {fontName: "'Arial'"}},
        series: {
        //0: {pointsVisible: true, color: '#003366', pointSize: 6},
        0: {pointsVisible: true, color: '#cc0000', pointSize: 6}
    },
  annotations: {
  textStyle: {bold: true,color: '#000000', fontName: "'Arial'"},
  stem:{color: 'none'}
  } 
    };
var chart2 = new google.visualization.LineChart(document.getElementById('data_div'));
    chart2.draw(data2, options2);}
}

</script>

<style type="text/css">
body {text-align: center; font-family: Arial, Helvetica, sans-serif;}
#wrapper {width: 75%; margin: 0 auto; text-align: left;}
#current {float: right; width: 28%; background-color: #ececec; padding: 0 1em; font-size: 80%; margin-left: 5%;}
h2 {margin-top: 2em;}
dt {font-weight: bold; margin-top: .5em;}
dd {padding-top: .25em; margin-top: .25em;}
dd.total {border-top: 1px solid #000;}
#chart_div, #data_div {width: 75%;}
</style>
</head>

<body>
<div id="wrapper">


<h1>Student Enrollment in State Universities and Community Colleges</h1>


<h3>Trend Data</h3>
<form>
<label for="selected2">You are viewing:</label>
<select id="selected2" onchange="initialize()">
      <option selected value="A1:E8">All state universities</option>
      <option value="F1:I8">Fake University 1</option>
</select>
<div id="chart_div"></div>
<input onClick="window.open('')" type="button" value="Download the complete data set" />
</form>

<h2>Community and Technical Colleges</h2>

<h3>Trend Data</h3>
<form>
<label for="selected3">You are viewing:</label>
<select id="selected3" onChange="initialize()">
<option selected value="sheet=GraduationRates-3Yr&range=A1:B11">3-Year graduation rate</option>
<option value="sheet=GraduationRates-2Yr&range=A1:B11">2-Year graduation rate</option>
</select>
<div id="data_div"></div>
<input onClick="window.open('')" type="button" value="Download the complete data set" />
</form>

</div>
</body>
</html>

[/代码]

将数据标签添加到没有设置列的Google图表

1 个答案: