在Google日历图表上移除ColorAxis图例

Question

想要在谷歌日历图表上移除颜色轴图例。颜色轴位于图表右上角。我的图表试图说明堪萨斯两栖动物和爬行动物的活动日期以及青蛙和蟾蜍的活动类型（呼叫 vs 不呼叫）。目前显示的颜色轴没有信息量...然而，另一种解决方案是将颜色轴标签更改为文本标签（例如呼叫、其他活动）。

示例请参见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>

- ttaggart

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>

- WhiteHat

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();
});

- DanIreland

---

DanIreland...谢谢。我使用了你的建议，但它只显示一个数字。例如：https://webapps.fhsu.edu/ksHerp/account.aspx?o=30&t=4 - ttaggart

啊...懂了... $($('#calendar_basic text')[3]).hide(); - ttaggart