程序员经验分享-hwhale

Google Charts LineChart 的图表范围过滤器

2024-01-12

我正在使用 Google Charts 折线图，但在将其绑定到图表范围过滤器时遇到一些问题。

这是我尝试过的： 容器：

<div id="dashboard_div">
                <!--Divs that will hold each control and chart-->
                <div id="control_div" style="width: 100%; height: 100%"></div>
                <div id="daily_container_count_lineChart" style="width: 100%; height: 100%"></div>
            </div>

JS部分：

var chart = new google.visualization.ChartWrapper({
    chartType: 'LineChart',
    containerId: 'daily_container_count_lineChart',
    options: {
        theme: 'maximized'
    }
});

var control = new google.visualization.ControlWrapper({
    controlType: 'ChartRangeFilter',
    containerId: 'control_div',
    options: {
        filterColumnIndex: 0
    }
});

var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));
dashboard.bind([control], [chart]);
dashboard.draw(data);

我在网页中的仪表板位置出现以下错误。控制台中没有错误。

一名或多名参与者抽签失败()

您使用错误的数据类型调用了draw()方法，而不是DataTable或DataView

您使用错误的数据类型调用了draw()方法，而不是DataTable或DataView

如果我尝试在没有图表范围过滤器的情况下绘制折线图，​​如下所示，它工作得很好，没有任何错误：

只绘制一个没有 ChartRangeFilter 的折线图：

var dailyContainerChart = new google.charts.Line(document.getElementById('daily_container_count_lineChart'));
dailyContainerChart.draw(data, {allowHtml: true, width: '100%', height: '100%'});

加载数据：

var getDailyContainerLineData = function (sourceData)
{
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'VIC - STH CRT');
data.addColumn('number', 'NSW - MINTO');
data.addColumn('number', 'QLD - PINKENBA');
data.addColumn('number', 'WA - HAZELMERE');

for(k =1;k< sourceData.getNumberOfColumns();k++)
{
    var rowData = new Array();
    var rowStart = sourceData.getColumnLabel(k);
    rowData.push(new Date(rowStart));
    for(l =0;l<sourceData.getNumberOfRows()-1;l++) // we don't want the 'total' row from the daily container table
    {
        var test = sourceData.getValue(l, k);
        if(typeof test === 'string')
        {
            var date = Date.parse(test);
            rowData.push(date);
        }
        else
        {
            rowData.push(test);
        }

    }

    data.addRow(rowData);
}

return data;
}

从上面返回的数据用于绘制仪表板和折线图。

我的问题是： 为什么当我尝试使用 ChartRangeFilter 绘制折线图时会出现错误的数据类型错误，而当我仅绘制折线图时却不会出现错误

我可以让 ChartRangeFiler 同时过滤具有不同数据源的 2 个图表（表格和折线图）吗？

Cheers.


仪表板接受与常规图表相同的数据格式。
从提供的示例数据构建数据表似乎画得很好。
没有看到加载语句，检查绘制仪表板时是否加载了所有必需的包。

至于第二个问题...
虽然您不能将单个控件绑定到多个数据源，但您可以使用'statechange'事件来控制其他源。

请参阅以下示例...

google.charts.load('current', {
  callback: function () {
    var data = new google.visualization.DataTable();
    data.addColumn('date', 'Date');
    data.addColumn('number', 'VIC - STH CRT');
    data.addColumn('number', 'NSW - MINTO');
    data.addColumn('number', 'QLD - PINKENBA');
    data.addColumn('number', 'WA - HAZELMERE');

    data.addRow([new Date('04/01/2001'), 3, 4, 7, 6]);
    data.addRow([new Date('04/02/2001'), 0, 9, 8, 7]);
    data.addRow([new Date('04/03/2001'), 9, 9, 0, 7]);
    data.addRow([new Date('04/04/2001'), 5, 5, 5, 2]);
    data.addRow([new Date('04/05/2001'), 6, 7, 1, 1]);
    data.addRow([new Date('04/06/2001'), 4, 4, 1, 9]);
    data.addRow([new Date('04/07/2001'), 4, 5, 9, 0]);

    var dataOther = new google.visualization.DataTable();
    dataOther.addColumn('date', 'Date');
    dataOther.addColumn('number', 'HLS - FLORENCE');
    dataOther.addColumn('number', 'FGT - GAY');
    dataOther.addColumn('number', 'KNX - FULTON');
    dataOther.addColumn('number', 'TN - VOLS');

    dataOther.addRow([new Date('04/01/2001'), 1, 8, 5, 2]);
    dataOther.addRow([new Date('04/02/2001'), 2, 9, 6, 3]);
    dataOther.addRow([new Date('04/03/2001'), 3, 0, 7, 4]);
    dataOther.addRow([new Date('04/04/2001'), 4, 1, 8, 5]);
    dataOther.addRow([new Date('04/05/2001'), 5, 2, 9, 6]);
    dataOther.addRow([new Date('04/06/2001'), 6, 3, 0, 7]);
    dataOther.addRow([new Date('04/07/2001'), 7, 4, 1, 8]);

    var chart = new google.visualization.ChartWrapper({
      chartType: 'LineChart',
      containerId: 'daily_container_count_lineChart',
      options: {
        theme: 'maximized'
      }
    });

    var control = new google.visualization.ControlWrapper({
      controlType: 'ChartRangeFilter',
      containerId: 'control_div',
      options: {
        filterColumnIndex: 0
      }
    });

    var table = new google.visualization.ChartWrapper({
      chartType: 'Table',
      containerId: 'table_div',
      dataTable: dataOther,
      options: {
        sortColumn: 1
      }
    });

    google.visualization.events.addListener(control, 'statechange', function () {
      var state = control.getState();
      var view = new google.visualization.DataView(dataOther);
      view.setRows(view.getFilteredRows([{column: 0, minValue: state.range.start, maxValue: state.range.end}]));
      table.setDataTable(view);
      table.draw();
    });

    var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));
    dashboard.bind([control], [chart]);
    dashboard.draw(data);
    table.draw();
  },
  packages: ['controls', 'corechart', 'table']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard_div">
  <div id="control_div" style="width: 100%; height: 100%"></div>
  <div id="daily_container_count_lineChart" style="width: 100%; height: 100%"></div>
</div>
<div id="table_div"></div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

googlevisualization

Google Charts LineChart 的图表范围过滤器 的相关文章

随机推荐

  • 切换按钮和开关的区别

    切换按钮和开关有什么区别 由于它们提供相同的功能 使用切换按钮或开关的具体用例是什么 切换按钮 Switch 这更多的是一个用户体验问题 而不仅仅是编码问题 这是我的回答 该控件的描述是这样说的 Toggle是一个按钮 sap m Togg

  • 为什么 go.mod 中的所有依赖都是间接的？

    我通过运行以下命令来初始化一个 go 项目 go mod init firstgo app 我确认模块已创建 cat go mod module firstgo app go 1 18 然后我通过执行安装了对 github com gin

  • 如何使用curses在终端中编写三行不断更新的行？

    我有一个程序需要输出三个不断变化的消息 连接数 已用时间和拒绝的连接 我尝试用以下方式写它们 r 在字符串末尾并在其他开始自己的输出循环之前打印换行符 认为回车符会返回一行 但它们最终都在第一行互相覆盖 我见过类似的问题 人们推荐使用cur

  • twitter bootstrap 调整手机屏幕上的文本大小

    我是 Twitter 引导程序的新手 我隐藏了一些 tr 在手机屏幕上的帮助下class hidden phone 但我想调整显示文本的大小以适合屏幕 如何在手机屏幕上调整文本大小 如下所示 span test test test test

  • Collections.unmodifierXXX 方法是否违反 LSP？ [关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 里氏替换原则 http en wikipedia org wiki Liskov substitution principle是原则之一SOLI

  • 将 javascript WebSocket 与 Java ServerSocket 连接

    我正在尝试将 javascript 与 Java 连接起来 但出现一些错误 javascript 端错误 WebSocket connection to wss 127 0 0 1 1234 failed WebSocket opening

  • 通过index.js从文件夹导入

    在我的 React 项目 带有 Webpack 中 我的文件夹结构如下 myfile js Report index js 根据我的research https stackoverflow com a 44092481 1493867 我应

  • Flexbox 可以检测 Flex 项目何时换行吗？

    我希望摆脱媒体查询并仅使用 Flexbox 来解决我的问题 但我不确定这是否可能 随着窗口变小 我希望列缩小 直到达到最小宽度 一旦他们击中了那个 中间的柱子就会跳下来进行换行 我想我的问题可以归结为 flexbox 可以检测到它何时换行吗

  • inotifywait 不执行 bash 脚本中的 while 循环

    我想在 Docker 容器中的目录上放置一个文件观察器 我在用着entrypoint sh脚本来设置放置文件观察器的脚本 设置如下 bin sh Trigger the script with the file watcher in the

  • 如何在phonegap/jquery移动应用程序中使用外部图像

    我正在为 android 开发一个phonegap jquery mobile 测试应用程序 我是这项技术的新手 我想在我的应用程序中显示存储在互联网站点上的图像 在 avd 中的应用程序启动期间 当将此元素放入我的 index html

  • 加载网页时：“# 的未定义方法‘request_uri’”

    我正在尝试使用 Ruby 通过 HTTP 加载网页并检查其状态代码是什么 我的代码如下所示 require net http r Net HTTP get response URI parse myURL return r code 然而

  • 检查输入是否为 int、float 或 bool 的 Python 程序

    所以我试图在这里编写一个程序 要求输入 然后检查输入是否有整数 布尔值或浮点数 如果有这些字符中的任何一个 那么它将再次要求输入 我想做的不仅仅是写作str input 就像用户输入一个int or bool等等它将打印错误并停止程序 这是

  • Rails 4：使用代理模型来组合多个模型

    我正在尝试在轨道上 4 我之前做过一些西纳特拉的作品 我有一个注册表单 用户可以在其中填写他的组织名称 地址和他自己的姓名 密码等 我有两个表 用户和组织 这些表中填充了注册数据 所以 我有两个活动记录模型users and organiz

  • Android 上的蓝牙：StartDiscovery 不起作用。无法扫描设备

    我是android新手 我正在制作一个具有蓝牙功能的应用程序 我可以设置蓝牙适配器 并获取我自己的设备信息 但我无法使用 startdiscovery 来发现蓝牙设备 当我开始扫描时它什么也不做 我正在使用 onclicklistener

  • Paypal结帐返回数据

    我有一个 paypal 按钮 如下所示

  • 仅具有 1 或 2 个可选字段的数据库表...拆分为多个表？

    在我正在设计的数据库中 有一个相当中心的表代表已售出或待售的物品 它区分个人销售 如 eBay 和正规公司的销售 这意味着实际上有 1 个或两个字段并不同样适用于两种情况 例如 一个字段仅在一种情况下使用 另一个字段在一种情况下是可选的 但

  • 如何以编程方式使用自动布局将活动指示器定位到其超级视图的中心？

    为什么以下代码无法将活动指示器定位到其超级视图的中心 UIActivityIndicatorView activityIndicator UIActivityIndicatorView alloc initWithActivityIndic

  • 如何检查union当前使用的是什么类型？

    假设我们有一个工会 typedef union someunion int a double b myunion 在我设置后 是否可以检查联合中的类型a 123 我的方法是将此联合添加到某个结构中 并在其为 int 时将 uniontype

  • Yii CGridView 仅隐藏过滤器输入

    使用 CGridView 时 过滤器输入字段由组件自动生成 我想选择哪些列将显示输入字段 例如 我的模型有 5 列 我希望 CGridView 仅显示第 1 列和第 2 列的输入过滤器 有没有一种方法可以不使用 CSS 或 jQuery 而

  • Google Charts LineChart 的图表范围过滤器

    我正在使用 Google Charts 折线图 但在将其绑定到图表范围过滤器时遇到一些问题 这是我尝试过的 容器 div div style width 100 height 100 div div style width 100 heig

热门标签