Google Charts -- 提示框

最新推荐文章于 2024-11-27 15:00:00 发布
最新推荐文章于 2024-11-27 15:00:00 发布
阅读量2.9k 收藏
点赞数 2
分类专栏： 前端 文章标签： javascript 图形 数据 谷歌

提示框:介绍

提示框是当你悬停时弹出的小文本框。（悬浮卡片更常见，可以出现在屏幕的任何位置；提示框一直依附于一些东西，就像散点图的点，或者柱状图的柱状。）

在这篇介绍中，你将会学到如何创建和定制化Google Charts的提示框。

指定提示框的类别

Google Charts为所有核心图表自动创建提示框。 它们会默认被指定为SVG，在IE 8中会被指定为VML。你可以在核心图表中创建 HTML tooltips  通过在 chart options 声明tooltip.isHtml: true， draw() 函数也可以声明 Tooltip Actions.

标准的提示框

在缺少任何定制化内容是，提示框会基于内部数据自动生成。你可以通过悬停鼠标在图表的任何柱状上来看到提示框。

定制化提示框内容

在这个例子中，我们通过给DataTable增加一个新列和标记其为tooltip role来给提示框增加定制化内容。

注意：这里在 Bubble Chart 重不可用。

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

      function drawChart() {
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('string', 'Year');
        dataTable.addColumn('number', 'Sales');
        // A column for custom tooltip content
        dataTable.addColumn({type: 'string', role: 'tooltip'});
        dataTable.addRows([
          ['2010', 600,'$600K in our first year!'],
          ['2011', 1500, 'Sunspot activity made this our best year ever!'],
          ['2012', 800, '$800K in 2012.'],
          ['2013', 1000, '$1M in sales last year.']
        ]);

        var options = { legend: 'none' };
        var chart = new google.visualization.ColumnChart(document.getElementById('tooltip_action'));
        chart.draw(dataTable, options);
      }

使用HTML提示框

这个例子基于之前的例子的基础。给图表属性增加了 tooltip.isHtml: true 

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

      function drawChart() {
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('string', 'Year');
        dataTable.addColumn('number', 'Sales');
        // A column for custom tooltip content
        dataTable.addColumn({type: 'string', role: 'tooltip'});
        dataTable.addRows([
          ['2010', 600,'$600K in our first year!'],
          ['2011', 1500, 'Sunspot activity made this our best year ever!'],
          ['2012', 800, '$800K in 2012.'],
          ['2013', 1000, '$1M in sales last year.']
        ]);

        var options = {
          tooltip: {isHtml: true},
          legend: 'none'
        };
        var chart = new google.visualization.ColumnChart(document.getElementById('col_chart_html_tooltip'));
        chart.draw(dataTable, options);
      }

这看起来没有很多不同，现在我们来定制化HTML。

定制HTML 内容

之前的内容都是用空白文本的提示框，但是HTML提示框真正厉害的地方在，你可以用HTML标记定制化HTML提示框。你必须做两件事来达到：

  1. 在图表的属性里强调 tooltip.isHtml: true 。这样告诉图表用HTML画提示框而不是用SVG。
  2. 在数据表格中用html传统属性标记整个列，或者某一个单元。一个有提示框角色和HTML属性的数据表格列应该是这样的：
    dataTable.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}})

    注意：这个在 Bubble Chart 中不生效。 Bubble Chart 的HTML提示框不可定制。 

定制HTML内容可以像增加一个<img>标签或者加粗文本一样简单：

传统 HTML 内容可以包括动态生成的内容。这里，我们增加了一个包括给每个类别值动态生成表格的提示框。因为这个提示框依附于行的值，悬停在任何一个柱状上都会显示HTML提示框。

这个例子展示了如何让定制化的HTML提示框加载在一个域的列上。（在之前的例子里，它被加载在一个数据列上。）给域的轴线开启提示框需要设置'category'属性。

function drawChart() {
  var dataTable = new google.visualization.DataTable();
  dataTable.addColumn('string', 'Country');
  // Use custom HTML content for the domain tooltip.
  dataTable.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}});
  dataTable.addColumn('number', 'Gold');
  dataTable.addColumn('number', 'Silver');
  dataTable.addColumn('number', 'Bronze');

  dataTable.addRows([
    ['USA', createCustomHTMLContent('https://upload.wikimedia.org/wikipedia/commons/2/28/Flag_of_the_USA.svg', 46, 29, 29), 46, 29, 29],
    ['China', createCustomHTMLContent('https://upload.wikimedia.org/wikipedia/commons/f/fa/Flag_of_the_People%27s_Republic_of_China.svg', 38, 27, 23), 38, 27, 23],
    ['UK', createCustomHTMLContent('https://upload.wikimedia.org/wikipedia/commons/a/ae/Flag_of_the_United_Kingdom.svg', 29, 17, 19), 29, 17, 19]
  ]);

  var options = {
    title: 'London Olympics Medals',
    colors: ['#FFD700', '#C0C0C0', '#8C7853'],
    // This line makes the entire category's tooltip active.
    focusTarget: 'category',
    // Use an HTML tooltip.
    tooltip: { isHtml: true }
  };

  // Create and draw the visualization.
  new google.visualization.ColumnChart(document.getElementById('custom_html_content_div')).draw(dataTable, options);
}

function createCustomHTMLContent(flagURL, totalGold, totalSilver, totalBronze) {
  return '<div style="padding:5px 5px 5px 5px;">' +
      '<img src="' + flagURL + '" style="width:75px;height:50px"><br/>' +
      '<table class="medals_layout">' + '<tr>' +
      '<td><img src="https://upload.wikimedia.org/wikipedia/commons/1/15/Gold_medal.svg" style="width:25px;height:25px"/></td>' +
      '<td><b>' + totalGold + '</b></td>' + '</tr>' + '<tr>' +
      '<td><img src="https://upload.wikimedia.org/wikipedia/commons/0/03/Silver_medal.svg" style="width:25px;height:25px"/></td>' +
      '<td><b>' + totalSilver + '</b></td>' + '</tr>' + '<tr>' +
      '<td><img src="https://upload.wikimedia.org/wikipedia/commons/5/52/Bronze_medal.svg" style="width:25px;height:25px"/></td>' +
      '<td><b>' + totalBronze + '</b></td>' + '</tr>' + '</table>' + '</div>';
}

旋转提示框

Google Charts 的提示框可以用CSS旋转。在下面的图表中，提示框通过在图表div前用内嵌CSS顺时针旋转了30°：

<style>div.google-visualization-tooltip { transform: rotate(30deg);}</style>


注意的是这只对HTML提示框生效：也就是有属性isHtml: true.


   
   
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
    google.charts.load('current', {'packages':['corechart']});
    google.charts.setOnLoadCallback(drawChart);
      function drawChart() {

        var data = google.visualization.arrayToDataTable([
          ['Year', 'Fixations'],
          ['2015',  80],
          ['2016',  90],
          ['2017',  100],
          ['2018',  90],
          ['2019',  80],
        ]);

        var options = {
          tooltip: { isHtml: true },    // CSS styling affects only HTML tooltips.
          legend: { position: 'none' },
          bar: { groupWidth: '90%' },
          colors: ['#A61D4C']
        };

        var chart = new google.visualization.ColumnChart(document.getElementById('tooltip_rotated'));

        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <!-- The next line rotates HTML tooltips by 30 degrees clockwise. -->
    <style>div.google-visualization-tooltip { transform: rotate(30deg); }</style>
    <div id="tooltip_rotated" style="width: 400px; height: 400px;"></div>
  </body>
</html>

在提示框中放图表

HTML 提示框可以包括任何你想要的HTML 内容—甚至是一个 Google Chart。有图表在你的提示框里，用户可以在悬停在数据元素时得到额外的信息：这是一个让人第一眼更深入了解高级详情的好方法。

柱状图展示了最近的几个主要体育赛事的最高浏览量，某个的提示框展示了一个最近十年平均浏览量的线形图。

有几个要注意的。第一，一个 printable chart 需要画给某组要展示提示框的数据。第二，某个提示框需要一个"ready" event handler，我们通过addListener 来创建printable chart。

IMPORTANT: All tooltip charts must be drawn before the primary chart. This is necessary in order to grab the images to add to the primary chart's DataTable.

IMPORTANT PARTSFULL WEB PAGE 

   
   
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
    google.charts.load('current', {'packages':['corechart']});
    google.charts.setOnLoadCallback(drawTooltipCharts);

      // Set up data for visible chart.
      var primaryData = [
        ['NBA Finals', 22.4],
        ['NFL Super Bowl', 111.3],
        ['MLB World Series', 19.2],
        ['UEFA Champions League Final', 1.9],
        ['NHL Stanley Cup Finals', 6.4],
        ['Wimbledon Men\'s Championship', 2.4]
      ];

      // Set up data for your tooltips.
      var tooltipData = [
        ['Year', 'NBA Finals', 'NFL Super Bowl', 'MLB World Series',
        'UEFA Champions League Final', 'NHL Stanley Cup Finals',
        'Wimbledon Men\'s Championship'],
        ['2005', 12.5, 98.7, 25.3, 0.6, 3.3, 2.8],
        ['2006', 13.0, 90.7, 17.1, 0.8, 2.8, 3.4],
        ['2007', 9.3, 93.0, 15.8, 0.9, 1.8, 3.8],
        ['2008', 14.9, 97.5, 17.1, 1.3, 4.4, 5.1],
        ['2009', 14.3, 98.7, 13.6, 2.1, 4.9, 5.7],
        ['2010', 18.2, 106.5, 19.4, 2.2, 5.2, 2.3],
        ['2011', 17.4, 111.0, 14.3, 4.2, 4.6, 2.7],
        ['2012', 16.8, 111.3, 16.6, 2.0, 2.9, 3.9],
        ['2013', 16.6, 108.7, 12.7, 1.4, 5.8, 2.5],
        ['2014', 15.7, 111.3, 15.0, 1.9, 4.7, 2.4]
      ];

      var primaryOptions = {
        title: 'Highest U.S. Viewership for Most Recent Event (in millions)',
        legend: 'none',
        tooltip: {isHtml: true} // This MUST be set to true for your chart to show.
      };

      var tooltipOptions = {
        title: 'U.S. Viewership Over The Last 10 Years (in millions)',
        legend: 'none'
      };

      // Draws your charts to pull the PNGs for your tooltips.
      function drawTooltipCharts() {

        var data = new google.visualization.arrayToDataTable(tooltipData);
        var view = new google.visualization.DataView(data);

        // For each row of primary data, draw a chart of its tooltip data.
        for (var i = 0; i < primaryData.length; i++) {

          // Set the view for each event's data
          view.setColumns([0, i + 1]);

          var hiddenDiv = document.getElementById('hidden_div');
          var tooltipChart = new google.visualization.LineChart(hiddenDiv);

          google.visualization.events.addListener(tooltipChart, 'ready', function() {

            // Get the PNG of the chart and set is as the src of an img tag.
            var tooltipImg = '<img src="' + tooltipChart.getImageURI() + '">';

            // Add the new tooltip image to your data rows.
            primaryData[i][2] = tooltipImg;

          });
          tooltipChart.draw(view, tooltipOptions);
        }
        drawPrimaryChart();
      }

      function drawPrimaryChart() {

        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Event');
        data.addColumn('number', 'Highest Recent Viewership');

        // Add a new column for your tooltips.
        data.addColumn({
          type: 'string',
          label: 'Tooltip Chart',
          role: 'tooltip',
          'p': {'html': true}
        });

        // Add your data (with the newly added tooltipImg).
        data.addRows(primaryData);

        var visibleDiv = document.getElementById('visible_div');
        var primaryChart = new google.visualization.ColumnChart(visibleDiv);
        primaryChart.draw(data, primaryOptions);

      }
    </script>
  </head>
<body>
<div id="hidden_div" style="display:none"></div>
<div id="visible_div" style="height:300px"></div>
</body>
</html>

提示框动作

提示框可以包括JavaScript定义的动作。举个简单的例子，有一个提示框，动作是当用户点击“See sample book" 弹出对话框：

tooltip 选项会在用户选择饼状图的某一块时触发，使得写在setAction 中的代码运行：

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

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Genre', 'Percentage of my books'],
          ['Science Fiction', 217],
          ['General Science', 203],
          ['Computer Science', 175],
          ['History', 155],
          ['Economics/Political Science', 98],
          ['General Fiction', 72],
          ['Fantasy', 51],
          ['Law', 29]
        ]);

        var chart = new google.visualization.PieChart(
          document.getElementById('tooltip_action'));

        var options = { tooltip: { trigger: 'selection' }};//这里要注意！！不是所有图标都有selection属性，timeline就没有！！

        chart.setAction({
          id: 'sample',
          text: 'See sample book',
          action: function() {
            selection = chart.getSelection();
            switch (selection[0].row) {
              case 0: alert('Ender\'s Game'); break;
              case 1: alert('Feynman Lectures on Physics'); break;
              case 2: alert('Numerical Recipes in JavaScript'); break;
              case 3: alert('Truman'); break;
              case 4: alert('Freakonomics'); break;
              case 5: alert('The Mezzanine'); break;
              case 6: alert('The Color of Magic'); break;
              case 7: alert('The Law of Superheroes'); break;
            }
          }
        });

        chart.draw(data, options);
      }

动作可以是 visible, enabled, 两者都有, 或者都没有. 当一个 Google Chart 被创建, 提示框动作只有在它是visible（可见）时是展示的，且只有在它是enabled（有效）时可以点击。

visible 和 enabled 应该是返回true或者false的函数。这些函数可以依赖元素ID和用户选择。

提示框可以由 focus 和selection触发。但是，作为提示框动作，selection 更好。 这样用户的选择动作更加方便。

动作当然不一定要是alerts，而是任何你可以用JavaScript做的动作。例子里我们增加了两个动作：一个是增大饼状图的一块，另一个是缩小。


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

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Genre', 'Percentage of my books'],
          ['Science Fiction', 217],
          ['General Science', 203],
          ['Computer Science', 175],
          ['History', 155],
          ['Economics & Political Science', 98],
          ['General Fiction', 72],
          ['Fantasy', 51],
          ['Law', 29]
        ]);

        var chart = new google.visualization.PieChart(
          document.getElementById('tooltip_action_2'));

        var options = { tooltip: { trigger: 'selection' }};

        chart.setAction({
          id: 'increase',
          text: 'Read 20 more books',
          action: function() {
            data.setCell(chart.getSelection()[0].row, 1,
                         data.getValue(chart.getSelection()[0].row, 1) + 20);
            chart.draw(data, options);
          }
        });

        chart.setAction({
          id: 'decrease',
          text: 'Read 20 fewer books',
          action: function() {
            data.setCell(chart.getSelection()[0].row, 1,
                         data.getValue(chart.getSelection()[0].row, 1) - 20);
            chart.draw(data, options);
          }
        });

        chart.draw(data, options);
      }

注释数据

你可以通过用annotationText 取代tooltip作为列角色来直接覆盖Google Chart上的文本。(你可以通过用你的鼠标悬停在注释上看到提示框。)

function drawChart() {
  var dataTable = new google.visualization.DataTable();
  dataTable.addColumn('string', 'Year');
  dataTable.addColumn('number', 'USA');
  dataTable.addColumn({type: 'string', role: 'annotation'});
  dataTable.addColumn({type: 'string', role: 'annotationText', p: {html:true}});
  dataTable.addColumn('number', 'China');
  dataTable.addColumn('number', 'UK');
  dataTable.addRows([
    ['2000',  94, '',  '', 58, 28],
    ['2004', 101, '',  '', 63, 30],
    ['2008', 110, 'An all time high!', '<img width=100px src="https://upload.wikimedia.org/wikipedia/commons/2/28/Flag_of_the_USA.svg">', 100, 47],
    ['2012', 104, '',  '', 88, 65]
  ]);

  var options = { tooltip: {isHtml: true}};
  var chart = new google.visualization.LineChart(document.getElementById('tt_6_annotation'));
  chart.draw(dataTable, options);
}

支持的图标

HTML 提示框如今支持如下图标:

If you are using the annotationText or tooltip roles, please see the documentation on roles to read about future changes and how to avoid future pain.

可视化数据网页开发Google Charts（一）:加载库
Lzs1998的博客
03-08 2763
Google Charts 除少数例外情况外，所有包含Google图表的网页都应在网页的&lt;head&gt;中包含以下几行： &lt;script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"&gt;&lt;/script&gt; &lt;script type="text/javascript...
可视化数据网页开发Google Charts（七）：面积图
Lzs1998的博客
03-08 895
&lt;html&gt; &lt;head&gt; &lt;script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; google
推荐使用：React Google Charts - 轻量级的Google图表React封装库
gitblog_00024的博客
05-13 488
推荐使用：React Google Charts - 轻量级的Google图表React封装库 去发现同类优质开源项目:https://gitcode.com/ 在数据可视化的世界里，高效且易于使用的工具始终受到开发者们的青睐。今天我们要向您推荐的是一个能够让您在React应用中无缝集成Google Charts的强大库——react-google-charts。这个库提供了一个类型安全、轻量级的...
Google Charts 开源项目教程
gitblog_01072的博客
08-09 289
Google Charts 开源项目教程 charts项目地址:https://gitcode.com/gh_mirrors/charts1/charts 1. 项目目录结构及介绍 Google Charts 的 GitHub 仓库主要包含以下目录： src/ - 源代码目录，这里包含了图表库的核心代码。 samples/ - 样例代码目录，用于演示各种图表的实现。 test/ - 测试用例目...
Google Chart Tools学习笔记 二 Area Chart
04-30 1789
今天我们来学习一下，不同chart 的具体使用方法。本次的主角是Area Chart。 概述： 面积图（Area Chart)使用SVG 或者VML显示在浏览器中，可以在鼠标悬停时显示提示信息。 作用：Google 示例： 示例代码： type="text/javascript" src="https://www.google.
google-chart-offline：离线Google图表
02-03
它允许开发者在离线环境中使用Google图表的强大功能，提供了与在线Google Charts API类似的接口，使得用户可以创建各种数据可视化图表。 【描述】"google-chart-offline" 提供了在没有网络连接时制作图表的可能性，...
数据可视化(6)--Google Charts实例
疯狂的原始人
03-26 1979
上头给的关于jqplot的问题暂时解决了，继续google charts。 google charts的实例很多，就以区域图(Geochart)为例~~ 区域图(Geochart)是一个国家、大陆或者区域的地图，它有两种模式。 region模式：在整个区域着色，如国家、省、州等。 marker模式：根据指定的值使用缩放气泡标记指定的区域。 区域图使用SVG或VML展示。请注意，该
robomotion-charts:Robomotion RPA掌舵表
04-30
10. **部署和配置**：包括如何在云平台上如AWS、Azure或Google Cloud上设置和运行这个Web应用。 为了实现这样一个系统，开发者需要掌握RPA工具的使用，理解Web开发的基本原理，以及具备数据可视化和云基础设施的...
基于 ECharts 实现谷歌 Charts 风格股票信息可视化
最新发布
Hanbo17c的博客
11-27 993
股票信息可视化能够将复杂的股票数据以直观、易懂的图形化方式呈现，助力用户迅速洞察市场趋势、精准识别交易机会并有效管理风险。ECharts 作为一款功能强大且广泛应用的可视化库，在股票信息可视化方面展现出卓越的性能与丰富的特性。本文将深入探讨运用 ECharts 按谷歌 Charts 风格开发股票信息可视化的方法与要点。
charts混合使用 elementui和e_vue+element-ui+echarts 项目搭建
weixin_42127937的博客
12-30 615
1， 环境搭建1.1， Node环境官方下载node检查安装情况node –vnpm –v1.2， 安装cnpmnpm install –g cnpm --registry=https://registry.npm.taobao.org1.3， 安装vue-clicnpm install vue-cli -g2， 项目构建vue init webpac...
google 图表（chart）
05-28
NULL 博文链接：https://justcoding.iteye.com/blog/626835
googleCharts
06-23
在此处处理本教程 1 -- 从这个开始
google-charts-portlet
03-08
google-charts-portlet
google-chart:集成了不同的Google图表
04-16
Google Chart整合 关于此测试项目 这是一个测试项目，列出了4种与Google图表集成的不同图表： 一个甜甜圈图，用于列出带有每周，每月和每年过滤器的报价。 一个甜甜圈图，用于列出每周，每月和每年的过滤器旅行。 一个条形图，用于列出预订，佣金以及每周，每月和每年的过滤器。 一个折线图，用于显示销售绩效以及预订成本和旅行成本。 Laravel易于访问，功能强大，并提供大型，强大的应用程序所需的工具。 要求 需要数据库 测试任务随附使用了演示daabase。 没有创建迁移文件或种子文件。 克隆项目后，运行composer install命令。 克隆项目后，添加一个.env文件，并在其中介绍您的数据库详细信息。 无需其他库，程序包或coposer命令即可进行设置。 点击基本网址（'/'）以运行项目，例如：-localhost / google-chart / pub
googleChart:googleChart
03-27
googleChart:googleChart
前端开发 —— google chart 的使用
05-06 7797
1. 引入所需的 js 库 在 &lt;head&gt;&lt;/head&gt;中 &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="https://
Vue3中使用Googlechart
gcf10080353的博客
07-27 390
type="ColumnChart"指定图表为柱状图。
使用Google Chart API 创建实时图表
allway2的博客
11-22 3091
实时图表可以实时显示数据。这意味着数据将永久更新以始终显示当前图表。要创建实时图表，我们使用JavaScript和Google Chart API。 这些实时图表通常用于仪表板中，以显示例如温度或价格的变化情况。应用领域多样，它们看起来确实不错。你自己看！ 实时图表–折线图 我在这里向您展示，您可以创建此实时图表。它每250毫秒更新一次，并显示（在我们的示例中）随机数据。在生产性使用中，它可以从数据库或直接从传感器读取和显示数据。 那不是全部。可以将相同的概念1：1转移到其他图表中...
Google Charts -- Timelines 使用说明
jessica_0715的博客
07-25 4651
概述 时间轴是一种描述一组数据随时间变化的图标。如果你在管理一个软件项目，想要标明谁在什么时候做什么任务，或者你在组织一场会议需要定会议室，时间轴是一个合理的图形化选择。一种出名的时间轴就是--甘特图。 注意：在JS的时间对象中，月份是从0到11，其中，一月是0，12月是11.如果你的时间轴错移了一个月，这可能是最大的原因。  一个简单的例子 假设你
Codeforces-Crawler：统计信息与比赛分析的编码平台工具
在前端展示方面，它集成了Bootstrap 4，这是一种流行的前端框架，用于开发响应式和移动优先的项目，而Chart.js和Google Charts则用于生成和展示数据图表，为用户提供直观的视觉数据体验。 该应用的用户统计部分展现...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值