Google Charts:折线图和柱形图之间的切换

2024-04-11

我有一个仪表板,其中包含一些 Google Analytics 指标。我想在每日、每月和每周图表上绘制这些指标。日线图为折线图,其他为柱形图。

我能够将图表最初绘制为折线图或条形图,然后将其重新绘制为不同类型,但之后它不会再次重新绘制!

这是我为了解释我的情况而设置的一个基本的简化示例:

<!DOCTYPE html>
<head>
    <title>Test</title>

     <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">

        // Load the Visualization API and the piechart package.
        google.load('visualization', '1.0', {'packages':['corechart']});

        // Set a callback to run when the Google Visualization API is loaded.
        google.setOnLoadCallback(initialize);

        function initialize() {

            var chart = new google.visualization.ColumnChart(document.getElementById('chart-div'));
            var line = new google.visualization.LineChart(document.getElementById('chart-div'));
            var data = [];
            data[0] = new google.visualization.DataTable();

            data[0].addColumn('string', 'x');
            data[0].addColumn('number', 'A');
            data[0].addColumn('number', 'B');
            data[0].addRow(['A', 123, 40]);
            data[0].addRow(['B', 17, 20]); 

            data[1] = new google.visualization.DataTable();

            data[1].addColumn('string', 'x');
            data[1].addColumn('number', 'C');
            data[1].addColumn('number', 'D');
            data[1].addRow(['C', 222, 13]);
            data[1].addRow(['D', 542, 80]); 

            var options = {
                width: 400,
                height: 240,
                vAxis: {minValue:0, maxValue:1000},
                animation: {
                    duration: 1000,
                    easing: 'out'
                }
            };

            var barsButton = document.getElementById('b1');
            var lineButton = document.getElementById('b2');

            function drawChart() {
                chart.draw(data[0], options);
            }

            function drawLine() {
                line.draw(data[1], options);
            }

            barsButton.onclick = function() {
                drawBars();
            }

            lineButton.onclick = function() {
                drawLine();
            }

            drawChart();
        }
    </script>
</head>

<body>
    <input type = 'button' id = 'b1' value = 'Draw Column Chart' />
    <input type = 'button' id = 'b2' value = 'Draw Line Chart' />
    <div id="chart-div"></div>
</body>

您应该使用ChartWrapper object https://developers.google.com/chart/interactive/docs/reference#chartwrapperobject

这样您只需要一个图表对象

 var chart = new google.visualization.ChartWrapper({
     containerId: 'chart-div'
 });

然后你可以使用以下命令更改其类型.setChartType method

 var barsButton = document.getElementById('b1');
 var lineButton = document.getElementById('b2');

 chart.setOptions(options);

 function drawBars() {
     chart.setChartType('ColumnChart');
     chart.setDataTable(data[0]);
     chart.draw();
 }

 function drawLine() {
     chart.setChartType('LineChart');
     chart.setDataTable(data[1]);
     chart.draw();
 }

 barsButton.onclick = function () {
     drawBars();
 }

 lineButton.onclick = function () {
     drawLine();
 }
 drawBars();

Demo at http://jsfiddle.net/gaby/Xmj6j/ http://jsfiddle.net/gaby/Xmj6j/

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Google Charts:折线图和柱形图之间的切换 的相关文章

随机推荐

  • Django PositiveIntegerField 中的 0 值?

    models PositiveIntegerField 类型的字段可以包含 0 值吗 我正在做类似的事情 points models PositiveIntegerField Thanks 我知道我应该自己尝试一下 但是我这里没有Djang
  • VBA:使用过滤的行和 SpecialCells(xlCellTypeVisible) 与将数据复制到新工作表中

    我有一个包含 250 000 行和 10 列的 Excel 工作簿 我想将数据拆分到不同的工作簿中 我的想法是过滤列表 以便 Excel VBA 不必在每次我的代码要求在数据中查找某些内容时都遍历所有 250 000 行 但是 我遇到了一个
  • type.Protocol 类 `__init__` 方法在显式子类型构造期间未调用

    蟒蛇的PEP 544 https www python org dev peps pep 0544 介绍typing Protocol用于结构子类型 又名 静态鸭子类型 在本 PEP 的部分中合并和扩展协议 https www python
  • mule-standalone-3.3.1 无法在 Windows 7 上启动

    在 Windows 7 中启动 mule 服务器时遇到以下问题 我已经设定JAVA HOME and MULE HOME适当地 MULE HOME is set to C BAM Linux fresh mule standalone 3
  • 操作栏中的选项卡项目宽度 (Android)

    我在活动的操作栏中使用了 12 个选项卡 目标是 API 17 在 Galaxy Nexus 4 2 2 上测试 正如预期的那样 我在操作栏下得到了一个水平滚动的选项卡列表 在下面的屏幕截图中 您可以看到最后一个选项卡 右侧的 B 明显小于
  • Swift - 将数组写入文本文件

    我从一个包含几千行纯文本的文件中读入 myArray 原生 Swift myData String stringWithContentsOfFile myPath encoding NSUTF8StringEncoding error ni
  • 在理解聚集索引时我错过了什么?

    如果没有任何索引 则通过 IAM 索引分配映射 访问表行 我可以使用 IAM 以编程方式直接访问行吗 缺少索引是否意味着读取特定行的唯一方法是全表扫描读取所有表 为什么 IAM 不能参与更具体的直接访问 如果表是堆 换句话说 它没有聚集索引
  • 在画布中将 Raphael JS 生成的 SVG 保存为 png 时出现问题

    我正在尝试转换由以下方式生成的 SVG拉斐尔 JS http raphaeljs com 以及用户 因为您可以拖动和旋转图像 我跟着这个在浏览器中将 SVG 转换为图像 JPEG PNG 等 https stackoverflow com
  • 如何将 Firestore 文档中的所有数据显示到 html 表格中

    我正在设计一个网页 该网页将从我的 firestore 集合中获取数据并显示每个文档及其相应的字段以下是代码 table class table is striped is narrow is hoverable is fullwidth
  • 封装和抽象之间的区别

    我今天去面试了 我有一个问题来自OOP 关于之间的区别封装 抽象 我据我所知回答说封装基本上将数据成员和成员函数绑定到一个称为Class 然而抽象基本上是为了隐藏实现的复杂性并为用户提供方便的访问 我以为她会同意我的回答 但她质疑 如果两者
  • 不包含“GetAwaiter”的定义

    我在下面的代码集中收到以下错误 它在 alliancelookup 行上出错 我不确定我做错了什么 但我自己看不到任何东西 我运行到 crest 的查询似乎运行良好 但我遇到的问题似乎与等待者有关 我想知道是否有解决方法 DynamicCr
  • AudioUnitInitialize 返回 -10851 (kAudioUnitErr_InvalidPropertyValue)

    假设代码是 status AudioUnitSetProperty unit kAudioUnitProperty StreamFormat kAudioUnitScope Input element format sizeof Audio
  • JavaScript 相当于 printf/String.Format

    我正在寻找一个与 C PHP 相当的 JavaScriptprintf 或者对于 C Java 程序员来说 String Format IFormatProvider对于 NET 我的基本要求是目前数字的千位分隔符格式 但处理大量组合 包括
  • 允许多个角色成员资格的自定义 MVC AuthorizeAttribute

    我创建了一个自定义 AuthorizeAttribute 类来处理我的 MVC4 应用程序中的精细授权 这是班级 AttributeUsage AttributeTargets Method AllowMultiple true publi
  • 事件必须是委托类型吗?

    不太熟悉声明和使用事件并收到错误 事件必须是委托类型 基本上想通过IMyInterface作为对另一个类的依赖 该类可以订阅接收MyClassEvent事件和事件数据是MyClass public interface IMyInterfac
  • 删除 RecyclerView 项目

    我有一个 RecyclerView 它在每个特定时期添加项目 添加对象时 如果列表项超过 比方说 500 则第一个项目将被删除 新项目将被添加 如果RecyclerView无法再向下滚动 recyclerView canScrollVert
  • 如何从类似于 Angular 中的 http 的静态数据创建一个 Observable?

    我有一个具有此方法的服务 export class TestModelService public testModel TestModel constructor Inject Http public http Http public fe
  • 忽略已经提交到 Git 存储库的文件 [重复]

    这个问题在这里已经有答案了 我有一个已经初始化的 Git 存储库 我添加了一个 gitignore文件到 如何刷新文件索引以便忽略我想要忽略的文件 取消跟踪single已添加 初始化到您的存储库的文件 i e 停止跟踪该文件 但不将其从系统
  • python 可以有不以“self”作为第一个参数的类或实例方法吗? [复制]

    这个问题在这里已经有答案了 我见过的每一个例子method in a class在Python中 有self作为第一个参数 所有方法都是如此吗 如果是这样 难道Python不能被编写成让这个论点被理解并且因此不需要吗 如果你想要一个不需要访
  • Google Charts:折线图和柱形图之间的切换

    我有一个仪表板 其中包含一些 Google Analytics 指标 我想在每日 每月和每周图表上绘制这些指标 日线图为折线图 其他为柱形图 我能够将图表最初绘制为折线图或条形图 然后将其重新绘制为不同类型 但之后它不会再次重新绘制 这是我