个人中心
gpt4 book ai didi

javascript - 将数据标签添加到没有设置列的谷歌图表

转载 作者：行者123 更新时间：2023-11-28 06:05:47 25 4
gpt4 key购买 nike

我有一个图表，允许用户选择一个选项来与全州平均值进行比较。在我使用 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" }]);
//

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

最佳答案

我现在可以使用设置的列，但是用于更改值的下拉列表不再起作用。我的猜测是，一旦图形转换为 DataView(而不是 DataTable)，它就会变成“只读”并且交互性就会丢失。 (此示例使用另一个图表。)我需要一种在选择另一个选项时重新绘制表格的方法。[代码]

<!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>

[/代码]

关于javascript - 将数据标签添加到没有设置列的谷歌图表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36869761/

25 4 0
文章推荐： javascript - 在解析时使用变量过滤数据
文章推荐： javascript - 当子内容超过父高度时，在溢出 :visible; div, 内滚动
文章推荐： ios - Collection View 。 Item 之间的最大距离。 swift 3
文章推荐： javascript - 替换新函数内的arguments.callee
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com