Question

想要移除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>

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

Answer 2

我想删除整个图例，并根据WhiteHat的答案对它进行了调整。基本上，我试图找到仅影响图例的相关属性并将其隐藏：

 google.visualization.events.addListener(chart, 'ready', function () {
   $($('#calendar_basic text')[0]).hide();
   $($('#calendar_basic text')[1]).hide();
   $($('#calendar_basic text')[2]).hide();
   $('#calendar_basic linearGradient').hide();
   $('#calendar_basic')
       .find('[fill-opacity="1"]').hide();
});

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

2 个答案: