javascript - 谷歌图表 : How to make differential timeline-6ren

javascript - 谷歌图表 : How to make differential timeline

转载作者：太空宇宙更新时间：2023-11-04 16:26:59

28

4

我有一个使用 Google Chart 显示时间表的脚本，但是我无法修改它以显示差异图表。

我只需计算两个值之间的差值并显示它，而不是总数。我有 [12, 3000, 2500], [15, 4700, 5800]第一个值是时间，第二个值是 X 团队，第三个值是 Y 团队。我想显示:

在时间 12 时，X 队比 X 队多 500 人。
在时间 15，Y 队比 X 队多 1100 人。

非常感谢，蒂姆

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

function drawLineColors() {
      var data = new google.visualization.DataTable();
      data.addColumn('number', 'X');
      data.addColumn('number', 'Blue Team');
      data.addColumn('number', 'Red Team');
			
      data.addRows([
        [0, 0, 0],     [3, 1700, 1600],   [6, 1800, 1700],    [9, 2500, 2423], 
        [12, 3000, 2500],  [15, 4700, 5800], 
        [18, 5200, 5900],  [21, 5500, 6000], 
        [24, 6000, 6200],  [27, 6800, 6700], 
        [30, 7500, 7000],  [33, 7800, 8200],
        [36, 7900, 9756],  [39, 8000, 10752], 
        [42, 9000, 13753],  [45, 15000, 17845],
		[48, 19000, 13753],  [55, 25000, 17845]
      ]);

      var options = {
     
   			lineWidth: 5,
      	animation:{
          duration: 5000,
          easing: 'in',
          startup : true
      	},
        legend : {
        	position : 'top'
        },
        //fontName : 'Shentox 7',
        enableInteractivity:false,
        width: 712,
      	height: 156,
        backgroundColor : {fill:'transparent'},
        curveType: 'function',
        hAxis: {
          title: 'Time'
        },
        vAxis: {
          title: 'Team Gold'
        },
        chartArea:{width:'72px',height:'126px'},
        colors: ['#FF0000', '#0000FF']
      };

      var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    }

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

最佳答案

您可以使用DataView.setColumns提供列值的公式

然后使用DataView绘制图表

请参阅以下工作片段...

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

function drawLineColors() {
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'X');
  data.addColumn('number', 'Blue Team');
  data.addColumn('number', 'Red Team');
  data.addRows([
    [0, 0, 0], [3, 1700, 1600],
    [6, 1800, 1700], [9, 2500, 2423],
    [12, 3000, 2500], [15, 4700, 5800],
    [18, 5200, 5900], [21, 5500, 6000],
    [24, 6000, 6200], [27, 6800, 6700],
    [30, 7500, 7000], [33, 7800, 8200],
    [36, 7900, 9756], [39, 8000, 10752],
    [42, 9000, 13753], [45, 15000, 17845],
    [48, 19000, 13753], [55, 25000, 17845]
  ]);

  var options = {
    lineWidth: 5,
    animation:{
      duration: 5000,
      easing: 'in',
      startup : true
    },
    legend : {
      position : 'top'
    },
    enableInteractivity:false,
    width: 712,
    height: 156,
    backgroundColor : {fill:'transparent'},
    curveType: 'function',
    hAxis: {
      title: 'Time'
    },
    vAxis: {
      title: 'Team Gold'
    },
    chartArea:{width:'72px',height:'126px'},
    colors: ['#FF0000', '#0000FF']
  };

  var dataView = new google.visualization.DataView(data);
  dataView.setColumns([0, {
    calc: function (data, row) {
      return data.getValue(row, 2) - data.getValue(row, 1);
    },
    type: 'number',
    label: 'Variance'
  }]);

  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  chart.draw(dataView, options);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

关于javascript - 谷歌图表 : How to make differential timeline，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40137119/

28

4

0

文章推荐： c# - 这个简单的 C++ DLL 在 C# 中不起作用

文章推荐： css - 使用 CSS 的多个等高框边框列——*没有*背景图像？

文章推荐： c++ - if 语句中运算符优先级的解释

文章推荐： html - 如何在 Bootstrap 3 中将所有列高与行高匹配？

node.js - Passport 谷歌 oauth2 与 Passport 谷歌 oauth20 包
这两个包看起来非常相似: http://www.passportjs.org/packages/passport-google-oauth2/ http://www.passportjs.org/pa
javascript - 谷歌、推特认证
我想在我的网站上添加通过 Google 和 Twitter 登录的按钮。我需要只使用应用程序的客户端而不是服务器端来完成此操作。但我没有找到任何 API。对于我发现的所有内容，我需要使用带有 key
javascript - 谷歌+网址分享
我使用此链接通过 google plus 共享我的页面。 https://plus.google.com/share?url=http%3A%2F%2Fexample.com%2Fcompany%2
Python 谷歌 API
我正在尝试学习 google API，并且我的经验是使用 Python，因此我尝试使用 google api python 客户端来访问一些 google 服务，但在构建服务对象时遇到错误。从 ap
indexing - 谷歌，还没有索引
在其实际的实时托管平台上构建实时站点的努力中，有没有办法告诉谷歌不要索引该网站？我发现了以下内容: http://support.google.com/webmasters/bin/answer.py
ios - 谷歌+登录SDK不工作
我正在开发一个 iOS 应用程序。当我运行用于 google+ 登录的程序时，在我点击允许访问按钮后，会显示此消息。 You've reached this page because we have
javascript - 谷歌+1按钮不起作用
我有一个非常复杂的网站，每个页面包含 11 个 js 文件。我最近添加了 google +1 按钮，代码如下: 这会正确显示 +1 按钮，直到我单击它。当我单击它时，出现此错误:https://
javascript 谷歌 API
我正在尝试使用 google API 创建一个 html 文件，以便在 google MAPS 上显示 KML 文件。这是 HTML 代码: function initMap() {
c++ - 谷歌/基准测试结果不一致
我是使用 Google Benchmark 的新手，在本地运行代码与在 Quick-Bench.com 上运行代码时，我收到了运行相同基准测试(下方)的不同结果，该基准测试使用 C++ 检索本地时间.
Ajax 内容索引，谷歌
我已按照 Google 网站上的说明通过添加以下元标记在我的 AngularJS 网站上启用 Ajax 抓取: 呈现的内容有一些链接，如: User 1 User 2 User 3 还有一些呈现动态
java - 谷歌 AppInvite
通过 Google 手册实现 Google AppInvite - link . 启动 Invite Activity 并在 LogCat 中获取下一步: E/AppInviteAgent: Get
谷歌 Go 的表现如何？
那么有人用过 Google 的 Go 吗？我想知道数学性能(例如触发器)与其他具有垃圾收集器的语言(如 Java 或 .NET)相比如何？有人调查过吗？最佳答案理论性能:纯 Go 程序的理论性能
stackdriver - 谷歌 stackdriver 缓慢
Stackdriver 测试我的网站启动速度慢我们使用 cloudflare 作为我们的站点 CDN 提供商。我们使用 stackdriver 从外部测试站点可用性，我们将时间检查间隔设置为 1 分
python - 谷歌 JAX 一维卷积神经网络
我正在尝试使用 stax.GeneralConv() ( https://jax.readthedocs.io/en/latest/_modules/jax/experimental/stax.htm
api - 谷歌 API 更改了来自谷歌金融的数据
我有一个从谷歌金融中提取日内数据的软件。但是，由于昨天 Google 更新了 API，所以软件报错了 Conversion from string HTML HEAD meta http-equiv=
php - 谷歌 oAuth : redirect_uri_mismatch
我们在尝试从 Google 获取 oAuth token 时遇到“redirect_uri_mismatch”错误: [client 127.0.0.1:49892] {\n "error" : "
recaptcha - 谷歌 reCAPTCHA 在中国
我的网站正在使用 Google reCAPTCHA 控件，但我听说它被阻止了中国，反正我看到有人报告说将 API 更改为 https://www.recaptcha.net在中国工作？ Anyone
wordpress - 谷歌 anchor 广告高度过大
背景 WordPress Google Adsense 谷歌自动插入 anchor 定广告 https://pptmon.com 问题如下图所示，主播广告的容器高度太大了! 如何调整高度？这是谷歌
python - 谷歌 Colab 未加载
我在使用 Google Colab 时遇到问题。当我想制作一个新的 Python3 Notebook 时，由于我登录了我的 Google 帐户，因此无法加载刚刚打开的新页面。我该怎么办？感谢您的帮
express - 谷歌 Passport 回调后设置cookie
我正在使用 facebook和 google oauth2使用 passport js 登录, 有了这个流用户点击登录按钮重定向到 facebook/google auth 页面(取决于用户选择的

首页

博学

6Ren·AI

商城

javascript - 谷歌图表 : How to make differential timeline