добавить метки данных в диаграмму Google без заданных столбцов

У меня есть диаграмма, которая позволяет пользователю выбрать вариант сравнения с средним по штату. График отлично работает, пока я не использую метод stringify для создания аннотаций - количество столбцов зависит от выбора. Каков ваш совет относительно того, как сохранить эту функциональность и все еще иметь метки данных?добавить метки данных в диаграмму Google без заданных столбцов

<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" }]); 
//

Это может быть, что я делаю это все неправильно - советы, оценили. Этот тип кодирования для меня новичок.

источник

2016-04-26 commcordinator

вы знаете, какие столбцы нужна аннотация? вы могли бы строить 'view.setColumns' динамически на основе' data.getNumberOfColumns() '... – WhiteHat

У меня это работает с использованием метода, о котором вы упомянули, но потеряли интерактивность. См. Сообщение ниже. – commcordinator

С кодом инициализации что-то не так. Если я возьму функцию drawChart, она будет работать. Спасибо за вашу помощь. – commcordinator

У меня есть работа с установленными столбцами, но выпадающее меню для изменения значения больше не работает. Я предполагаю, что как только график смещается в 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>

[/ код]

источник

2016-05-02 12:21:44 commcordinator

добавить метки данных в диаграмму Google без заданных столбцов

ответ

Смежные вопросы