如何使Google Chart响应导航标签

Google Chart是一种强大的数据可视化工具，可以帮助开发人员创建各种图表和图形。要使Google Chart响应导航标签，可以按照以下步骤进行操作：

引入Google Chart库：在HTML文件的头部引入Google Chart库的JavaScript文件。可以使用以下代码：

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

加载所需的图表包：根据需要加载所需的图表包。例如，如果要使用柱状图和饼图，可以使用以下代码：

google.charts.load('current', {packages: ['corechart', 'bar', 'pie']});

创建导航标签：在HTML文件中创建导航标签，可以使用HTML的导航标签元素（如<ul>和<li>）来实现。例如：

<ul id="chartTabs">
  <li data-chart="bar">柱状图</li>
  <li data-chart="pie">饼图</li>
</ul>

监听导航标签的点击事件：使用JavaScript代码监听导航标签的点击事件，并根据点击的标签切换显示相应的图表。例如：

document.getElementById('chartTabs').addEventListener('click', function(event) {
  var chartType = event.target.getAttribute('data-chart');
  drawChart(chartType);
});

绘制图表：根据选中的导航标签，使用Google Chart库提供的相应方法绘制相应的图表。例如，使用google.visualization.BarChart和google.visualization.PieChart来绘制柱状图和饼图。示例代码如下：

function drawChart(chartType) {
  var data = google.visualization.arrayToDataTable([
    ['Task', 'Hours per Day'],
    ['Work', 8],
    ['Sleep', 8],
    ['Eat', 2],
    ['Exercise', 2],
    ['Relax', 4]
  ]);

  var options = {
    title: 'My Daily Activities'
  };

  var chart;
  if (chartType === 'bar') {
    chart = new google.visualization.BarChart(document.getElementById('chartContainer'));
  } else if (chartType === 'pie') {
    chart = new google.visualization.PieChart(document.getElementById('chartContainer'));
  }

  chart.draw(data, options);
}