堆棧內存溢出
  簡體   English   中英

將數據標簽添加到沒有設置列的Google圖表

[英]add data labels to google chart with no set columns

 原文  2016-04-26 15:45:15  2   1    javascript/ google-visualization

問題描述

我有一個圖表，允許用戶選擇一個選項來與全州平均值進行比較。 圖表工作正常，直到我使用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" }]);
//

這可能是我做錯了 - 建議，贊賞。 這種編碼對我來說是新的。

1 個解決方案

解決方案1
 0  2016-05-02 12:21:44

我現在已經使用set columns工作了，但更改值的下拉列表不再有效。 我的猜測是，一旦圖形轉換為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>

[/碼]

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 如何向Google圖表添加數據標簽 將標簽添加到Google圖表 將標簽添加到highcharts餅圖圖例中的列 如何在Google Chart Candlestick中設置圖例標簽 如何為我的Google圖表列設置數據類型？ 如何使用雷達圖在 Chart.js 中將數據值設置為標簽 將數據標簽添加到 chart.js 上的氣泡圖 Google氣泡圖標簽 在Google圖表中動態添加行和列 谷歌圖表 API：設置桑基圖中節點標簽的值
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM