当某些值丢失时如何绘制谷歌折线图?

2024-02-29

我在以下位置找到了以下 JavaScript 代码谷歌图表工具 http://code.google.com/apis/chart/interactive/docs/gallery/imagelinechart.html:

  function drawVisualization() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Year');
    data.addColumn('number', 'Sales');
    data.addColumn('number', 'Expenses');
    data.addRows(4);
    data.setValue(0, 0, '2004');
    data.setValue(0, 1, 1000);
    data.setValue(0, 2, 400);
    data.setValue(1, 0, '2005');
    data.setValue(1, 1, 1170); // sales for 2005
    data.setValue(1, 2, 460);
    data.setValue(2, 0, '2006');
    data.setValue(2, 1, 860);
    data.setValue(2, 2, 580);
    data.setValue(3, 0, '2007');
    data.setValue(3, 1, 1030);
    data.setValue(3, 2, 540);

    var chart = new google.visualization.ImageLineChart(document.getElementById('visualization'));
    chart.draw(data, {width: 500, height: 250, min: 0});
  }

如果我注释掉设置 2005 年销售额值的代码行,Sales这条线将出现在图表上,从 2006 年开始到 2007 年结束。我期待看到Sales2004 年(Y=1000)到 2006 年(Y=860)以及 2006 年(Y=860)到 2007 年(Y=1030)的线。

如果我没有 2005 年销售额的值,但有 2004 年、2006 年和 2007 年的销售额值,我该如何绘制该图表?

实际结果:

预期结果:(我为 2005 年销售添加值 930 只是为了显示我想要完成的任务;我希望有更好的方法来做到这一点,而无需计算所有系列的所有缺失的 Y 值)


如果您可以使用此图表的 javascript 版本,那么您可以通过使用 interpolateNulls 选项来实现您想要的效果折线图选项 http://code.google.com/apis/chart/interactive/docs/gallery/linechart.html#Configuration_Options.

这是一个工作示例。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load('visualization', '1.1', {packages: ['corechart', 'imagelinechart']});
    </script>
    <script type="text/javascript">
    function drawVisualization() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Year');
        data.addColumn('number', 'Sales');
        data.addColumn('number', 'Expenses');
        data.addRows(4);
        data.setValue(0, 0, '2004');
        data.setValue(0, 1, 1000);
        data.setValue(0, 2, 400);
        data.setValue(1, 0, '2005');
        //data.setValue(1, 1, 1170); // sales for 2005
        data.setValue(1, 2, 460);
        data.setValue(2, 0, '2006');
        data.setValue(2, 1, 860);
        data.setValue(2, 2, 580);
        data.setValue(3, 0, '2007');
        data.setValue(3, 1, 1030);
        data.setValue(3, 2, 540);

        var chart = new google.visualization.LineChart(document.getElementById('visualization'));
        chart.draw(data, {width: 500, height: 250, min: 0, interpolateNulls: true});
      }
      google.setOnLoadCallback(drawVisualization);
    </script>
  </head>
  <body>
    <div id="visualization" style="width: 600px; height: 400px;"></div>
  </body>
</html>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

当某些值丢失时如何绘制谷歌折线图? 的相关文章

  • 如何将 Google Charts 中的轴的格式设置为某种模式?

    我想更改值的格式axis看起来像这样 1 100 1 000 10 000 100 000 1 000 000 意思是 我想将默认分组符号更改为空格 到目前为止 我尝试了不同的方法 但没有一个有效 即便是文档 https developer
  • SSRS堆叠条形图标签位置

    我正在使用 SQL Server 2012 SSRS 我有一个堆积的条形图 其中包括利息和股息 我想将这些值的总和添加到堆积条形图上方的区域 我尝试过调整标签的各种属性 但我无法将标签位置设置在堆叠条形图中间以外的任何位置 有什么想法如何让
  • 在 Flex 上显示数据点

    我正在使用带有
  • Chart.getSelection() 无法与谷歌条形图正常工作

    drawBarChart function data few statements goes here which sets options which are being passed to chartDraw i e t options
  • 想要在谷歌饼图图例中显示百分比数据

    I am using google charts API specifically pie chart in my code i want to show percentage which is displayed inside chart
  • Google 气泡图自定义工具提示列不呈现

    我正在尝试将自定义工具提示添加到气泡图中 以替换默认的工具提示 我已按照文档网站的说明进行操作 here https developers google com chart interactive docs customizing tool
  • html / javascript / php 中 json 响应的折线图

    我正在尝试创建一个单线图html javascript 中的 json 响应 sql 我试图创建的是一个图表 其中只有onetag name 行 在以下情况下 phone 4 此行应表示所有 json 字符串的所有值和日期时间 JSON 响
  • openpyxl 图表误差线样式

    我被分配了一项 简单 的任务 即将一系列数据列收集到结果工作簿中 结果工作簿包含分析结果所需的公式和图表 这些数据是由我用 python 编写的图像分析应用程序生成的 作为一系列 Excel 工作簿 现在的问题是 openpyxl 会删除
  • 选择数据集时触发更改 [Amcharts 多数据集图表]

    是否可以在他们提供的 amcharts 多数据集图表的选择元素上触发 更改 amChartsDataSetSelector find select val 2 trigger change 这是我尝试过的代码 它的作用基本上是将选择选项更改
  • 如何在 Excel 中创建时间范围图表

    Can anyone help me create graph of time ranges of all elements in Excel My data looks like this 连接时间和断开连接时间数据值采用 24 小时格式
  • Javafx-场景快照不显示值和系列

    我制作了一个非常短的应用程序 它使用 javafx 生成图表 应用程序显示正确的值 图表 但当我做快照时 图像仅显示轴和标签 但不显示系列和值 stage setTitle Line Chart Sample final DateAxis
  • Chart.JS 工具提示回调标签和标题 (v3.5)

    请注意 v2 有很多答案 这是 v3 的 我正在尝试设置工具提示label and title对于圆环图 Code Create the donut chart donut new Chart questions positivity do
  • ComponentOne 3D 曲面地图的替代方案 [关闭]

    Closed 这个问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 我们正在为我们正在进行的一个新项目研究替代控制库 要求之一是以表面图的形式显示数据 如下面的 Comp
  • 图表无法在 Xcode 14 上编译

    我在图书馆中面临以下错误 Type 图表数据集 不符合协议 范围可替换集合 实例方法不可用 替换Subrange with 用于满足协议的要求 范围可替换集合 将其附加到扩展 ChartDataSet RangeReplaceableCol
  • 在react-highcharts中动态更改系列数据,无需重新渲染图表

    I have created a line chart using react highcharts It has 3 series and different data for each of them And I have a rang
  • 如何将 Excel 中的图表导出为图形

    我有一系列 Excel 电子表格 每个电子表格至少包含一页数据和一页根据数据创建的图表 我需要捕获 不从数据中重新生成 将现有图表作为网络友好图像 这可以通过 Java 或 Net 实现吗 我知道 POI 的东西 Java 不会这样做 或者
  • MS图表烛台如何设置尾部颜色

    我目前正在使用 Visual C 中的 mschart 开发烛台图 我现在创建了两个图表 创建的图表如下 问题 1 查看顶部的蜡烛图 我想将每根杆的尾部颜色应用为红色或蓝色 问题 2 查看底部的条形图 我想对此图表应用红色或蓝色 我想将相同
  • nvd3 格式化日期始终返回 1970-01-01

    我正在尝试使用构建折线图nvd3 for d3js但我在 x 轴上使用日期域时遇到了一些问题 这是我的代码 data lineChart key key1 values x 2014 04 20 y 6 x 2014 04 13 y 5 x
  • 如何在 json 中输出 javascript 日期

    我正在尝试时间线图表 http code google com apis visualization documentation gallery annotatedtimeline html Data Format http code go
  • Android 图表[关闭]

    Closed 此问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 我正在开发一个项目 其中有一些图表 图形 刻度图 烛台图和范围图 但问题是 没有该图表的库 我有烛台图的

随机推荐

  • 调用 WebRequest GetSystemWebProxy()

    在 PowerShell 2 0 下 我知道您可以通过执行以下操作来设置您想要使用的代理 而无需知道确切的代理设置 proxy System Net WebRequest GetSystemWebproxy proxy Credential
  • 解析 JSON 以配置 Android 应用程序

    在我的 Android 应用程序中 我必须使用服务器中的 JSON 在应用程序中进行特定调整 我试图实现的目标是读取此 json 并将所有值存储到局部变量中以在应用程序内执行操作 来自服务器的 JSON sett glHdr sm scle
  • 如何获取 .wav 文件格式的 numpy 数组输出

    我是 Python 新手 我正在尝试训练我的音频语音识别模型 我想读取 wav 文件并将该 wav 文件的输出放入 Numpy 数组中 我怎样才能做到这一点 根据 Marco 的评论 您可以查看 Scipy 库 特别是scipy io fr
  • PHP:删除unicode文本中少于3个字符的单词

    我使用这些正则表达式来删除少于 3 个字符的单词 str preg replace b w 1 3 b str and rdu b b 1 2 b str preg replace rdu str 但在 unicode 文本中返回我 有没有
  • 使用 HttpListener 检测客户端断开连接

    我有一个使用 HttpListener 的应用程序 我需要知道客户端何时断开连接 现在我将所有代码都放在 try catch 块中 这非常丑陋 而且不是一个好的做法 我如何知道客户端是否已断开连接 thanks 简短的回答 你不能 如果客户
  • 程序可以读取自己的 elf 部分吗?

    我想使用 ld 的 build id 选项来将构建信息添加到我的二进制文件中 但是 我不确定如何在程序中提供此信息 假设我想编写一个程序 每次发生异常时都会写入回溯 以及一个解析此信息的脚本 该脚本读取程序的符号表并搜索回溯中打印的地址 我
  • 如何获取 Laravel 的平均时间

    我想要得到平均时间开始时间和结束时间之间以及Where CUR Time GroupBY 用户名我在 laravel 中编写了 sql 它显示了一些错误 我找不到那是什么 因为我是 laravel 的新手 请帮助修复此 sql 错误 我提交
  • Android Studio 的启动栏逐渐消失到主程序中

    我目前正在开发一个 Android 应用程序 刚刚开始 我就能够实现我的闪屏了 然而 我不喜欢它和主要活动之间的过渡 我希望初始屏幕淡出 主屏幕淡入 看起来它们混合在一起 因为我对两者都有相同的背景图像 做了一些研究 但未能找到正确的答案
  • 如何将数字转换为科学记数法?

    我想创建一个函数 它接受输入的值并将其转换为科学记数法 N x 10 a 我尝试了很多不同的事情 但我似乎无法做到正确 Example 我输入 200 转换器将其转换为 2 x 10 2 你可以这样做 a 200 a toExponenti
  • 解析错误:语法错误,意外的“mysql_query”(T_STRING)

    我是 php 新手 在更新表的某一列时遇到此错误 if isset POST approved change SELECT FROM workplan forchange mysql query change while infoChang
  • Grails 根据枚举列表属性中的枚举值选择域对象

    我在根据枚举列表中的值从域对象列表中选择项目时遇到问题 我的域对象如下所示 class Truck static hasMany makes Make 其中 Make 看起来像这样 enum Make KENWORTH MACK VOLVO
  • 非托管导出错误“RGiesecke.DllExport.MSBuild.DllExportAppDomainIsolatedTask”

    我在 Visual Studio 2017 编译 DLL 项目时遇到问题 我在包管理器控制台上执行了 Install Package UnmanagedExports 错误 无法从程序集 C Users Tom Desktop CSharp
  • NodeJS ping 端口

    我正在为我工 作的一家托管公司编写一个状态检查器 我们想知道如何使用 nodejs 检查端口的状态 如果可能的话 如果没有 你能建议任何其他想法 比如使用 PHP 和阅读 STDOUT 吗 是的 这可以很容易地使用net http node
  • Java EE 7 属性文件配置的最佳实践建议是什么?

    应用程序配置在现代 Java EE 应用程序中属于什么位置 人们有哪些最佳实践建议 通过应用程序配置 我的意思是诸如与其他设备上的服务的连接设置之类的设置 包括外部设备 例如 Twitter 和我们的内部 Cassandra 服务器 用于主
  • VS2015中如何设置工具提示颜色?

    我刚刚安装了 Visual Studio 2015 总体来说非常好 但是您可以在 工具 gt 选项 gt 字体和颜色 下配置的大量不同内容完全让我感到困惑 我需要找到允许我更改此工具提示颜色的设置 以便我可以实际阅读它 它在哪里 下载颜色主
  • php:: tmp 文件保留多长时间?

    我正在编写上传脚本 如果用户上传一个文件并且该文件已经存在 我想警告用户 这都是通过ajax 并让他们选择替换它或取消 而不是移动文件 我很好奇是否可以将文件保留在 tmp 中并在 ajax 响应中传回该文件的路径 如果用户说覆盖该 aja
  • Android 版 Chrome 无法正确显示 Google 网络字体

    我已经使用 CSS 重现了我遇到的问题font family以及 Android 版 Chrome Web 浏览器无法正确继承字体 而是使用后备字体 http jsbin com iyifah 1 edit http jsbin com i
  • RxJS - 使用成对确认和恢复输入字段

    所以我对可观察的东西有点陌生 我正在努力解决一个场景 我认为它可能是一个很好的候选问题 开始了 场景是这样的 我有一个下拉字段 当它改变时 我想要 检查基于条件以前的值和新的值领域的 如果条件通过 则请求用户确认 并且 如果用户未确认 则恢
  • Android 上的 Bootstrap 3 长模态滚动背景

    我有一个长模态框 无法在我的 Android 移动设备上完全显示 按钮位于屏幕底部下方 模态框根本不滚动 但模态框后面的灰色背景会滚动 是否有任何 css js锁定背景并允许模式在显示时滚动的技巧 可能是因为模态类位置是固定的 尝试将下面的
  • 当某些值丢失时如何绘制谷歌折线图?

    我在以下位置找到了以下 JavaScript 代码谷歌图表工具 http code google com apis chart interactive docs gallery imagelinechart html function dr