2017-06-20 7 views
1

Googleカレンダーチャートで彩色の凡例を削除しますか?カラー軸は、チャートの右上にあります。私の表は、カンザス両生類と爬虫類の活動の日付と、カエルやヒキガエルの活動の種類(呼び出すものとないものの種類)を説明しようとしています。表示されているような色の軸は意味を持たないが、別の解決方法は、色覚ラベルをテキストラベル(例えば、呼び出し、他のアクティブ)に変更することであろう。Googleカレンダーチャートでcoloraxisの凡例を削除します。

http://webapps.fhsu.edu/ksfaunatest/account.aspx?o=30&t=3

<script type="text/javascript"> 
google.charts.load("current", { packages: ["calendar"] }); 
google.charts.setOnLoadCallback(drawChart); 
function drawChart() { 
var dataTable = new google.visualization.DataTable(); 
dataTable.addColumn({ type: 'date', id: 'Date' }); 
dataTable.addColumn({ type: 'number', id: 'Activity' }); 
dataTable.addRows([ 
[new Date(2012, 4, 3), 1], 
[new Date(2012, 4, 16), -1], 
[new Date(2012, 5, 6), -1], 
// many rows removed 
[new Date(2012, 7, 15), 1], 
[new Date(2012, 7, 25), -2], 
]); 
var chart = new google.visualization.Calendar(document.getElementById('calendar_basic')); 
var options = { 
legend: 'none', 
title: '', 
calendar: { 
daysOfWeek: '', 
yearLabel: { 
fontName: 'Times-Roman', 
fontSize: 1, 
color: '#000000', 
bold: false, 
italic: false 
}, 
} 
}; 
chart.draw(dataTable, options); 
} 
drawChart(); 
</script> 

答えて

0

で何標準オプションは、凡例を削除したり、手動で変更することができ、チャートの'ready'イベントが発生し、
一度、しかしテキスト

を変更するために存在しません。.. 。

google.visualization.events.addListener(chart, 'ready', function() { 
    $($('#calendar_basic text')[0]).text('Calling'); 
    $($('#calendar_basic text')[1]).text(''); 
    $($('#calendar_basic text')[2]).text('Other'); 
    }); 

...作業スニペット以下を参照してください

google.charts.load('current', { 
 
    callback: function() { 
 
    $(window).resize(drawChart); 
 
    drawChart(); 
 
    }, 
 
    packages: ["calendar"] 
 
}); 
 
function drawChart() { 
 
    var dataTable = new google.visualization.DataTable(); 
 
    dataTable.addColumn({ type: 'date', id: 'Date' }); 
 
    dataTable.addColumn({ type: 'number', id: 'Activity' }); 
 
    dataTable.addRows([ 
 
    [new Date(2012, 4, 3), 1], 
 
    [new Date(2012, 4, 16), -1], 
 
    [new Date(2012, 5, 6), -1], 
 
    [new Date(2012, 7, 15), 1], 
 
    [new Date(2012, 7, 25), -2], 
 
    ]); 
 
    var chart = new google.visualization.Calendar(document.getElementById('calendar_basic')); 
 
    var options = { 
 
    legend: 'none', 
 
    title: '', 
 
    calendar: { 
 
     daysOfWeek: '', 
 
     yearLabel: { 
 
     fontName: 'Times-Roman', 
 
     fontSize: 1, 
 
     color: '#000000', 
 
     bold: false, 
 
     italic: false 
 
     }, 
 
    } 
 
    }; 
 
    google.visualization.events.addListener(chart, 'ready', function() { 
 
    $($('#calendar_basic text')[0]).text('Calling'); 
 
    $($('#calendar_basic text')[1]).text(''); 
 
    $($('#calendar_basic text')[2]).text('Other'); 
 
    }); 
 
    chart.draw(dataTable, options); 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="calendar_basic"></div>

関連する問題