Google Chart:获取仪表板中条形图的列数

2023-12-11

我有一个如下所示的 JSON 数据来在谷歌图表中构建仪表板。 我想绘制一个每月条形图,其中 x 轴作为 scan_time(月份),y 轴作为进入该月的 tag_id 的计数。 tag_ids 可以重复。

输入 JSON 格式的数据:

 [ 
       {  
          "tag_id":"04:0f",
          "scan_time":"2016-09-29 06:47:47",
       },
       {  
          "tag_id":"04:0f",
          "scan_time":"2016-09-29 14:48:42",
       },
       {  
          "tag_id":"99:9n",
          "scan_time":"2016-10-29 06:47:47",
       },
       {  
          "tag_id":"05:m8",
          "scan_time":"2016-11-29 06:48:42",
       }
    ]

就像是

Month       Count
    Sept        2
    Oct         1
    Nov         1

一旦 JSON 被加载到 DataTable 中,

使用数据操作方法 -->group()

它返回一个聚合的 DataTable

请参阅以下工作片段,
group 方法将第一列转换为“月”字符串,
并聚合每个“月”的标签 ID 计数

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

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['date', 'tag_id'],
    [new Date('2016-09-29 06:47:47'), '04:0f'],
    [new Date('2016-09-29 14:48:42'), '04:0f'],
    [new Date('2016-10-29 06:47:47'), '99:9n'],
    [new Date('2016-11-29 06:48:42'), '05:m8'],
  ]);

  var formatDate = new google.visualization.DateFormat({pattern: 'MMMM'});

  var dataGroup = google.visualization.data.group(
    data,

    // group by column
    [{
      column: 0,
      label: 'Month',
      modifier: function (val) {
        return formatDate.formatValue(val);
      },
      type: 'string'
    }],

    // agg columns
    [{
      aggregation: google.visualization.data.count,
      column: 1,
      label: 'Tag Count',
      type: 'number'
    }]
  );

  var table = new google.visualization.Table(document.getElementById('chart_div'));
  table.draw(dataGroup);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

EDIT

使用 DataView 对行进行自定义排序

var view = new google.visualization.DataView(dataGroup);
view.setRows([2, 1, 0]);

use view绘制表格图表和任何其他图表...

以下代码片段包括一个 ColumnChart...

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

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['date', 'tag_id'],
    [new Date('2016-09-29 06:47:47'), '04:0f'],
    [new Date('2016-09-29 14:48:42'), '04:0f'],
    [new Date('2016-10-29 06:47:47'), '99:9n'],
    [new Date('2016-11-29 06:48:42'), '05:m8'],
  ]);

  var formatDate = new google.visualization.DateFormat({pattern: 'MMMM'});

  var dataGroup = google.visualization.data.group(
    data,

    // group by column
    [{
      column: 0,
      label: 'Month',
      modifier: function (val) {
        return formatDate.formatValue(val);
      },
      type: 'string'
    }],

    // agg columns
    [{
      aggregation: google.visualization.data.count,
      column: 1,
      label: 'Tag Count',
      type: 'number'
    }]
  );

  var view = new google.visualization.DataView(dataGroup);
  view.setRows([2, 1, 0]);

  var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
  chart.draw(view);

  var table = new google.visualization.Table(document.getElementById('table_div'));
  table.draw(view);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
<div id="table_div"></div>

EDIT 2

使用 ChartWrapper,设置view as the dataTable财产,例如

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

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

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

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['date', 'tag_id'],
    [new Date('2016-09-29 06:47:47'), '04:0f'],
    [new Date('2016-09-29 14:48:42'), '04:0f'],
    [new Date('2016-10-29 06:47:47'), '99:9n'],
    [new Date('2016-11-29 06:48:42'), '05:m8'],
  ]);

  var formatDate = new google.visualization.DateFormat({pattern: 'MMMM'});

  var dataGroup = google.visualization.data.group(
    data,

    // group by column
    [{
      column: 0,
      label: 'Month',
      modifier: function (val) {
        return formatDate.formatValue(val);
      },
      type: 'string'
    }],

    // agg columns
    [{
      aggregation: google.visualization.data.count,
      column: 1,
      label: 'Tag Count',
      type: 'number'
    }]
  );

  var view = new google.visualization.DataView(dataGroup);
  view.setRows([2, 1, 0]);

  var chart = new google.visualization.ChartWrapper({
    chartType: 'ColumnChart',
    containerId: 'chart_div',
    dataTable: view
  });
  chart.draw();

  var table = new google.visualization.ChartWrapper({
    chartType: 'Table',
    containerId: 'table_div',
    dataTable: view
  });
  table.draw();
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
<div id="table_div"></div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Google Chart:获取仪表板中条形图的列数 的相关文章

  • Chart.js:将堆叠条形图的工具提示放置在条形图的顶部

    当我在简单的条形图中有一个条形时 工具提示位于条形的顶部 如果我将鼠标悬停在堆积条形图上 工具提示将放置在average位置 我希望将工具提示始终放在堆叠条形图的顶部 就像简单条形图一样 而不是这种行为 配置位置的唯一两个选项是averag
  • 如何在同一个html上绘制2个谷歌图表

    我正在尝试下面的代码 但它仅显示第一个代码的图表 你能告诉我哪里出错了吗 我尝试做很多改变 但仍然没有成功 i am only getting single chart as shown in below photo enter code
  • Chart.js 渲染垂直堆积条形图太慢

    我正在使用 Chart js API 渲染多个堆叠的垂直条形图 但性能很慢 我什至做了一些改变 这样所有的content对象已经由服务器而不是浏览器处理 但我意识到大部分时间来自最终函数new Chart overallStatsChart
  • 设置 Wpf 饼图样式

    这是我的饼图 xaml
  • 谷歌绘制具有相同比例的多个系列的图表

    我正在寻找一种在图形上显示多个系列的方法 这些系列具有相同的比例但仅显示一次 正如你在这里看到的 http jsfiddle net Youkoal d3xwnqdu http jsfiddle net Youkoal d3xwnqdu 我
  • jQuery.getJSON() 错误:浏览器链接:无法调用返回值回调:TypeError:无法读取 null 的属性“文件”

    我正在关注 Sam Farajpour Ghamari 的回答 如何使用通过代码首先创建的数据库中的数据填充谷歌图表 ASP Net MVC https stackoverflow com questions 32524745 how to
  • 如何使用Python从Excel复制图表并将其作为图表粘贴到powerpoint(而不是图像)中

    我有一个excel文件 它根据可用数据生成图表 图表名称是thisChart 我想复制thisChart从 excel 文件到 ppt 文件 现在我知道有两种方法可以做到这一点 即VBA和python 使用win32com client V
  • 使用谷歌图表API并通过ajax在线索提示中显示内容

    我有一个jsp页面 它使用google图表api以条形图的形式显示数据 Here https google developers appspot com chart interactive docs gallery columnchart是
  • ggplot 中跨组的连续线

    我有一个数据时间序列 其中观察了一些数据 模拟了一些数据 我想生成整个数据系列随时间变化的图 其中颜色表示数据源 但是 我只能弄清楚如何使 ggplot 中的 geom line 连接同一组中的点 这是一个例子来说明 Create samp
  • jQuery float bar 数字:数字定位

    我在用着jquery flot barnumbers js https github com joetsoi flot barnumbers 的插件jQuery 的 Javascript 绘图 图表 库 https github com f
  • NVD3 - 配置轴上的刻度

    我有一个 nvd3 折线图 它显示时间序列 但无法在 x 轴右侧获取刻度 对于较长的时间跨度 它会按预期工作 但对于较短的时间跨度 此处 12 31 05 至 01 01 06 多个刻度显示相同的日期 请看一下JSFiddle 上此图表的代
  • Google 图表中的轴断了

    有什么方法可以在 Google 图表 api 上的垂直刻度中创建中断吗 我有几十个数据点 y 轴上的值都在 600 2000 左右 除了一个值几乎为 300 000 这使得所有较小的数据点几乎不可读 我需要表示所有这些数据 而对数刻度不是一
  • 如何制作饼图聚合数据源?

    Using 适用于 ASP NET MVC 的 Kendo UI 完整版 http www kendoui com 版本 2013 3 1119 2013年11月20日 如果我有这段代码 status chart kendoChart da
  • Chart.js,设置最大值

    我正在制作雷达图Chart js 但它只会变得与其中的最大值一样大 我希望将其设置为标准最大值 因此范围是 0 到 100 您可以看到您在不同主题上的进度如何 有谁知道如何设置雷达图的最大范围值Chart js 我尝试添加一个设置为 100
  • ASP.NET 图表控件透明度

    我正在使用 ASP NET 图表库 它可以生成饼图 但我在配置它以生成带有半透明切片的饼图时遇到问题 如果你看一下图片 你就会明白我在说什么 在 4 个饼图中 顶部 2 个和左下角图表具有我正在讨论的饼图切片透明度 source scott
  • Altair 中的世界地图 + 滑块 (Python)

    我想使用 Python 中的 Altair 库构建一个带有世界地图的交互式图表 其中包含每个国家 地区的 COVID 19 确诊病例和日期滑块 数据格式 country region date confirmed cases Afghani
  • 如何将 C3 图表添加到 Angular 2+ 项目

    我搜索了很多有关 Angular2 图表包的信息 但没有 C3 js 的名称 直到我在下面的链接中找到了 C3 js 图表的示例 ani angular strapui com dashboard charts c3 chart http
  • Google Charts API:始终使用 arrayToDataTable 显示数据点值。如何?

    首先 我想让大家知道 虽然有一个类似的问题 Google Charts API 始终在图表中显示数据点值 https stackoverflow com questions 13449467 google charts api always
  • Google 图表,聚合/分组过滤后的数据表

    我有一个 DataTable 一个 DateRangeFilter 和一个聚合对象 我希望可以使用 DateRangeFilter 来过滤 DataTable 中的数据并将聚合限制为 FILTERED DataTable 但这并没有发生 我
  • 如何将 JavaScript 图表导出到 Excel 文件 (HighCharts)

    我必须将 Javascript 图表 HighCharts 导出到 Excel 文件中 图表在div中呈现 但excel不呈现javascript生成的html css内容 仅呈现没有样式的文本 一个解决方案是将图表渲染为图像 jpeg 但

随机推荐