删除Google日历图表上的coloraxis图例-Java 学习之路

想要删除Google日历图表上的coloraxis图例 . 颜色轴位于图表的右上角 . 我的图表试图说明堪萨斯两栖动物和爬行动物的活动日期以及青蛙和蟾蜍的活动类型（呼叫与否） . 显示的coloraxis是无信息的...但是另一种解决方案是将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>

1 回答

没有用于删除图例甚至更改文本的标准选项

然而，一旦图表的 '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>

回复于 2024-05-03T02:05:29+08:00

删除Google日历图表上的coloraxis图例

1 回答

相关问题