javascript - Google ChartWrapper 不适用于直方图-6ren

javascript - Google ChartWrapper 不适用于直方图

转载作者：行者123 更新时间：2023-11-30 20:36:54

我正在关注 this来自 Google Chart documentation 的示例.

在该项目中，所有现有图表均使用 ChartWrapper 绘制, 所以通过下面的例子我创建了 this chart ，现在我需要做的就是用 ChartWrapper 替换创建新直方图实例的行。

即将以下代码替换为:

let chart = new google.visualization.Histogram(
  document.getElementById("example")
);
chart.draw(data, options);

以下代码:

let wrapper = new google.visualization.ChartWrapper({
  chartType: "Histogram",
  dataTable: data,
  options: options,
  containerId: "example_chartwrapper"
});
wrapper.draw();

但它不起作用，我收到以下错误:

Invalid column index 1. Should be an integer in the range [0-0].

我可能遗漏了一些非常小的东西，但我很难理解是什么。我已阅读 ChartWrapper 限制，除了事件之外，它似乎没有任何其他限制。

FWIW:我创建了 another example with Google's example data这也行不通

HTML:

<div class="card">
  <div class="card-body">
    <div class="row">
      <div class="col-6">
        <p>Using new Histogram</p>
        <div id="example" />
      </div>      
    </div>
    <div class="col-6">
        <p>Using ChartWrapper</p>
        <div id="example_chartwrapper" />
      </div>
  </div>
</div>

Javascript:

google.charts.load("current", { packages: ["corechart"] });
google.charts.setOnLoadCallback(drawChart);

function drawChart() {  
  let data = new google.visualization.DataTable(GetData());

  let options = {
    title: "Approximating Normal Distribution",
    legend: { position: "none" },
    colors: ["#4285F4"],

    //chartArea: { width: '100%' },
    hAxis: {
      ticks: [2,2.01,2.02,2.03,2.04,2.05,2.06,2.07,2.08,2.09,2.10,2.11,2.12,2.13,2.14,2.15,2.16,2.17,2.18,2.19,2.20,2.21,2.22,2.23,2.24,2.25,2.26,2.27,2.28,2.29,2.30,2.31,2.32,2.33,2.34,2.35,2.36,2.37,2.38,2.39]
    },

    bar: {
      gap: 0
    },
    histogram: {
      bucketSize: 0.01,
      maxNumBuckets: 400,
      minValue: 2,
      maxValue: 3
    }
  };


      let wrapper = new google.visualization.ChartWrapper({
                    chartType: 'Histogram',
                    dataTable: data,
                    options: options,
                    containerId: "example_chartwrapper"
                });
      wrapper.draw();


  let chart = new google.visualization.Histogram(
    document.getElementById("example")
  );

  chart.draw(data, options);
}

function GetData() {
  return {
    cols: [
      {
        type: "number",
        id: "Ohm",
        label: "Ohm"
      }
    ],
    rows: [
      {
        c: [
          {
            v: 2.28
          }
        ]
      },
      {
        c: [
          {
            v: 2.24
          }
        ]
      },
      {
        c: [
          {
            v: 2.18
          }
        ]
      },
      {
        c: [
          {
            v: 2.14
          }
        ]
      },
      {
        c: [
          {
            v: 2.22
          }
        ]
      },
      {
        c: [
          {
            v: 2.16
          }
        ]
      },
      {
        c: [
          {
            v: 2.24
          }
        ]
      },
      {
        c: [
          {
            v: 2.2
          }
        ]
      },
      {
        c: [
          {
            v: 2.28
          }
        ]
      },
      {
        c: [
          {
            v: 2.16
          }
        ]
      },
      {
        c: [
          {
            v: 2.16
          }
        ]
      },
      {
        c: [
          {
            v: 2.28
          }
        ]
      },
      {
        c: [
          {
            v: 2.26
          }
        ]
      },
      {
        c: [
          {
            v: 2.26
          }
        ]
      },
      {
        c: [
          {
            v: 2.28
          }
        ]
      },
      {
        c: [
          {
            v: 2.28
          }
        ]
      },
      {
        c: [
          {
            v: 2.28
          }
        ]
      },
      {
        c: [
          {
            v: 2.3
          }
        ]
      },
      {
        c: [
          {
            v: 2.24
          }
        ]
      },
      {
        c: [
          {
            v: 2.24
          }
        ]
      },
      {
        c: [
          {
            v: 2.24
          }
        ]
      },
      {
        c: [
          {
            v: 2.26
          }
        ]
      },
      {
        c: [
          {
            v: 2.26
          }
        ]
      },
      {
        c: [
          {
            v: 2.24
          }
        ]
      },
      {
        c: [
          {
            v: 2.18
          }
        ]
      },
      {
        c: [
          {
            v: 2.26
          }
        ]
      },
      {
        c: [
          {
            v: 2.2
          }
        ]
      },
      {
        c: [
          {
            v: 2.18
          }
        ]
      },
      {
        c: [
          {
            v: 2.16
          }
        ]
      },
      {
        c: [
          {
            v: 2.26
          }
        ]
      },
      {
        c: [
          {
            v: 2.14
          }
        ]
      },
      {
        c: [
          {
            v: 2.24
          }
        ]
      },
      {
        c: [
          {
            v: 2.18
          }
        ]
      },
      {
        c: [
          {
            v: 2.22
          }
        ]
      },
      {
        c: [
          {
            v: 2.27
          }
        ]
      },
      {
        c: [
          {
            v: 2.28
          }
        ]
      },
      {
        c: [
          {
            v: 2.25
          }
        ]
      },
      {
        c: [
          {
            v: 2.18
          }
        ]
      },
      {
        c: [
          {
            v: 2.28
          }
        ]
      },
      {
        c: [
          {
            v: 2.22
          }
        ]
      },
      {
        c: [
          {
            v: 2.2
          }
        ]
      },
      {
        c: [
          {
            v: 2.22
          }
        ]
      },
      {
        c: [
          {
            v: 2.12
          }
        ]
      },
      {
        c: [
          {
            v: 2.2
          }
        ]
      },
      {
        c: [
          {
            v: 2.18
          }
        ]
      },
      {
        c: [
          {
            v: 2.26
          }
        ]
      },
      {
        c: [
          {
            v: 2.24
          }
        ]
      },
      {
        c: [
          {
            v: 2.22
          }
        ]
      },
      {
        c: [
          {
            v: 2.26
          }
        ]
      },
      {
        c: [
          {
            v: 2.2
          }
        ]
      },
      {
        c: [
          {
            v: 2.24
          }
        ]
      },
      {
        c: [
          {
            v: 2.1
          }
        ]
      },
      {
        c: [
          {
            v: 2.26
          }
        ]
      },
      {
        c: [
          {
            v: 2.18
          }
        ]
      },
      {
        c: [
          {
            v: 2.26
          }
        ]
      },
      {
        c: [
          {
            v: 2.2
          }
        ]
      },
      {
        c: [
          {
            v: 2.1
          }
        ]
      },
      {
        c: [
          {
            v: 2.28
          }
        ]
      },
      {
        c: [
          {
            v: 2.28
          }
        ]
      },
      {
        c: [
          {
            v: 2.18
          }
        ]
      },
      {
        c: [
          {
            v: 2.26
          }
        ]
      },
      {
        c: [
          {
            v: 2.16
          }
        ]
      },
      {
        c: [
          {
            v: 2.26
          }
        ]
      },
      {
        c: [
          {
            v: 2.18
          }
        ]
      },
      {
        c: [
          {
            v: 2.2
          }
        ]
      },
      {
        c: [
          {
            v: 2.2
          }
        ]
      },
      {
        c: [
          {
            v: 2.12
          }
        ]
      },
      {
        c: [
          {
            v: 2.18
          }
        ]
      },
      {
        c: [
          {
            v: 2.26
          }
        ]
      },
      {
        c: [
          {
            v: 2.18
          }
        ]
      },
      {
        c: [
          {
            v: 2.26
          }
        ]
      },
      {
        c: [
          {
            v: 2.16
          }
        ]
      },
      {
        c: [
          {
            v: 2.18
          }
        ]
      },
      {
        c: [
          {
            v: 2.3
          }
        ]
      },
      {
        c: [
          {
            v: 2.2
          }
        ]
      },
      {
        c: [
          {
            v: 2.2
          }
        ]
      },
      {
        c: [
          {
            v: 2.14
          }
        ]
      },
      {
        c: [
          {
            v: 2.18
          }
        ]
      },
      {
        c: [
          {
            v: 2.16
          }
        ]
      },
      {
        c: [
          {
            v: 2.28
          }
        ]
      },
      {
        c: [
          {
            v: 2.24
          }
        ]
      },
      {
        c: [
          {
            v: 2.18
          }
        ]
      },
      {
        c: [
          {
            v: 2.22
          }
        ]
      },
      {
        c: [
          {
            v: 2.29
          }
        ]
      },
      {
        c: [
          {
            v: 2.16
          }
        ]
      },
      {
        c: [
          {
            v: 2.3
          }
        ]
      },
      {
        c: [
          {
            v: 2.28
          }
        ]
      },
      {
        c: [
          {
            v: 2.26
          }
        ]
      },
      {
        c: [
          {
            v: 2.2
          }
        ]
      },
      {
        c: [
          {
            v: 2.18
          }
        ]
      },
      {
        c: [
          {
            v: 2.18
          }
        ]
      },
      {
        c: [
          {
            v: 2.28
          }
        ]
      },
      {
        c: [
          {
            v: 2.14
          }
        ]
      },
      {
        c: [
          {
            v: 2.12
          }
        ]
      },
      {
        c: [
          {
            v: 2.2
          }
        ]
      },
      {
        c: [
          {
            v: 2.2
          }
        ]
      },
      {
        c: [
          {
            v: 2.24
          }
        ]
      },
      {
        c: [
          {
            v: 2.24
          }
        ]
      },
      {
        c: [
          {
            v: 2.22
          }
        ]
      },
      {
        c: [
          {
            v: 2.18
          }
        ]
      },
      {
        c: [
          {
            v: 2.26
          }
        ]
      },
      {
        c: [
          {
            v: 2.26
          }
        ]
      },
      {
        c: [
          {
            v: 2.2
          }
        ]
      },
      {
        c: [
          {
            v: 2.24
          }
        ]
      },
      {
        c: [
          {
            v: 2.22
          }
        ]
      },
      {
        c: [
          {
            v: 2.29
          }
        ]
      },
      {
        c: [
          {
            v: 2.26
          }
        ]
      },
      {
        c: [
          {
            v: 2.18
          }
        ]
      },
      {
        c: [
          {
            v: 2.25
          }
        ]
      },
      {
        c: [
          {
            v: 2.2
          }
        ]
      },
      {
        c: [
          {
            v: 2.22
          }
        ]
      },
      {
        c: [
          {
            v: 2.24
          }
        ]
      },
      {
        c: [
          {
            v: 2.24
          }
        ]
      },
      {
        c: [
          {
            v: 2.24
          }
        ]
      },
      {
        c: [
          {
            v: 2.3
          }
        ]
      },
      {
        c: [
          {
            v: 2.2
          }
        ]
      },
      {
        c: [
          {
            v: 2.28
          }
        ]
      },
      {
        c: [
          {
            v: 2.26
          }
        ]
      },
      {
        c: [
          {
            v: 2.28
          }
        ]
      },
      {
        c: [
          {
            v: 2.24
          }
        ]
      },
      {
        c: [
          {
            v: 2.24
          }
        ]
      },
      {
        c: [
          {
            v: 2.26
          }
        ]
      },
      {
        c: [
          {
            v: 2.24
          }
        ]
      },
      {
        c: [
          {
            v: 2.3
          }
        ]
      },
      {
        c: [
          {
            v: 2.29
          }
        ]
      },
      {
        c: [
          {
            v: 2.26
          }
        ]
      },
      {
        c: [
          {
            v: 2.26
          }
        ]
      },
      {
        c: [
          {
            v: 2.16
          }
        ]
      },
      {
        c: [
          {
            v: 2.2
          }
        ]
      },
      {
        c: [
          {
            v: 2.18
          }
        ]
      }
    ]
  };
}

最佳答案

data format for Histogram does show 至少需要数据表中的两列数据

Histogram 必须以不同于 ChartWrapper 的方式处理数据，
最有可能对两列都使用单个值

一个简单的解决方法是在 ChartWrapper 上添加一个 View ，
并为两列使用相同的索引...

let wrapper = new google.visualization.ChartWrapper({
  chartType: 'Histogram',
  dataTable: data,
  options: options,
  containerId: "example_chartwrapper",
  view: {  // <-- add view
    columns: [0, 0]
  }
});

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

google.charts.load('current', {
  packages:['controls', 'corechart']
}).then(function () {
  function randomNorm() {
    return (
      (Math.random() +
        Math.random() +
        Math.random() +
        Math.random() +
        Math.random() +
        Math.random() -
        3) /
      3
    );
  }

  var arr = [["Counts"]];
  for (var i = 0; i < 5000; i++) {
    arr.push([randomNorm()]);
  }
  var data = google.visualization.arrayToDataTable(arr);

  var options = {
    title: "Approximating Normal Distribution",
    legend: { position: "none" },
    colors: ["#4285F4"],
    chartArea: { width: 401 },
    hAxis: {
      ticks: [-1, -0.75, -0.5, -0.25, 0, 0.25, 0.5, 0.75, 1]
    },
    bar: {
      gap: 0
    },
    histogram: {
      bucketSize: 0.01,
      maxNumBuckets: 400,
      minValue: -1,
      maxValue: 1
    }
  };

  let wrapper = new google.visualization.ChartWrapper({
    chartType: 'Histogram',
    dataTable: data,
    options: options,
    containerId: "example_chartwrapper",
    view: {
      columns: [0, 0]
    }
  });
  wrapper.draw();

  var chart = new google.visualization.Histogram(
    document.getElementById("example")
  );
  chart.draw(data, options);
});

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

或者在加载数据表时简单地为两列使用相同的值...

google.charts.load('current', {
  packages:['controls', 'corechart']
}).then(function () {
  function randomNorm() {
    return (
      (Math.random() +
        Math.random() +
        Math.random() +
        Math.random() +
        Math.random() +
        Math.random() -
        3) /
      3
    );
  }

  var arr = [["x", "y"]];
  for (var i = 0; i < 5000; i++) {
    var value = randomNorm();
    arr.push([value, value]);
  }
  var data = google.visualization.arrayToDataTable(arr);

  var options = {
    title: "Approximating Normal Distribution",
    legend: { position: "none" },
    colors: ["#4285F4"],
    chartArea: { width: 401 },
    hAxis: {
      ticks: [-1, -0.75, -0.5, -0.25, 0, 0.25, 0.5, 0.75, 1]
    },
    bar: {
      gap: 0
    },
    histogram: {
      bucketSize: 0.01,
      maxNumBuckets: 400,
      minValue: -1,
      maxValue: 1
    }
  };

  let wrapper = new google.visualization.ChartWrapper({
    chartType: 'Histogram',
    dataTable: data,
    options: options,
    containerId: "example_chartwrapper"
  });
  wrapper.draw();

  var chart = new google.visualization.Histogram(
    document.getElementById("example")
  );
  chart.draw(data, options);
});

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

关于javascript - Google ChartWrapper 不适用于直方图，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49732641/

文章推荐： c# - 从 xml 中检索值 - C#

文章推荐： javascript - 使用 bluebird .reduce 将参数传递给一系列 promise

文章推荐： c# - IEnumerable 中每个项目的自定义 json 序列化

文章推荐： javascript - 在 JavaScript 中捕获类内部调用者的 `this`

Gnuplot 直方图
我使用为 .dat 文件中的一些数据创建了直方图 binwidth=... bin(x,width)=width*floor(x/width) plot 'file' using (bin($1,b
Kibana 直方图 - 单个图表上的多条参数化线
我需要能够在单个直方图上显示多条线，其中每条线都应该由一个参数表示。我有多个服务器，我想监控它们的 CPU 使用率。我的 Kibana 输入数据如下所示: 时间戳 |机器 |姓名 |值(value)
Kibana 直方图 - 在单个图表上绘制多个系列
我在 Elasticsearch 中有一个索引，它包含一个简单对象数组(键值，请参见下面的示例)。文档有时间戳。我可以在 Kibana 中为每个键值创建单独的直方图(即一个用于 bytes_sen
来自频率表的 R 直方图
所以我想出了如何将我的数据下钻到频率表 - Overall.Cond Freq 235 1 0 236 2 0 237
带框阴影的 gnuplot 直方图
我的目标是使用 gnuplot 5.4 框创建直方图，并用特定的 RGB 值对每个框进行着色(出于测试目的，它是“绿色”，但在最终数据集中将是 #RRGGBB) 我的数据如下所示: 5.800507
r - 具有可变宽度的重叠条形图/直方图
我有 chr totgenes FST>0.4 %FST>0.4 exFST>0.4 %exFST>0.4 inFST>0.4 %inFST>0.4 chrtotlen 1 14
带有误差条的 Matplotlib 直方图
我用 matplotlib 创建了一个直方图使用 pyplot.hist()功能。我想在条形图中添加 bin 高度 ( sqrt(binheight) ) 的毒物误差平方根。我怎样才能做到这一点？ .
具有多个种群的 R 直方图
我有兴趣在 R 中创建一个包含两个(或更多)人口的直方图，这意味着 - 我不希望两个直方图共享同一个图形，而是一个包含两种或更多颜色的条形图。找到下面的图片 - 这就是我想要完成的。有什么想法吗？
Gnuplot、跳过时间数据、直方图
所以，我需要按日期制作数据直方图，但我有 xticlabel 重叠的问题，所以，我试图找到一个解决方案，如何跳过 xtics 以避免重叠。考虑到日期不是整数抽动，我试图以这种方式解决它: .dat 文
histogram - 在grafana中显示每小时平均值(直方图)
给定每小时都有数据点的(电力)市场数据的时间序列，我想显示一个包含每小时数据的所有时间/时间范围平均值的条形图，以便分析师可以轻松地将实际价格与所有时间平均值进行比较(一天中哪个小时最贵/最便宜)。
scala - 直方图 - 以并行方式进行
+----+----+--------+ | Id | M1 | trx | +----+----+--------+ | 1 | M1 | 11.35 | | 2 | M1 | 3.4
Gnuplot、跳过时间数据、直方图
所以，我需要按日期制作数据直方图，但我有 xticlabel 重叠的问题，所以，我试图找到一个解决方案，如何跳过 xtics 以避免重叠。考虑到日期不是整数抽动，我试图以这种方式解决它: .dat 文
gnuplot:误解数据(直方图)
我有以下示例数据文件，我想在 gnuplot 中将其绘制为直方图 1 1 2 2 4 3 我正在使用以下命令绘制数据:用方框绘制“sample.data”，生成以下图表: ##
java - 随机数测试(直方图)
我是 Java 编码新手，我正在尝试使用提供给我的以下方法创建直方图。这些注释是对每个方法的说明，稍后我们将使用它们来创建主方法并打印直方图。我已经达到了方法 3，并且能够很好地编译所有内容，但我不确
php - 如何使用文本文件中获得的数据绘制实时图形(直方图)
我有一个由服务器上的程序生成的连续生成的数据(文本文件)。我想将数据绘制为实时图表，就像 powergrid做。这是我的方法: 由于数据是在服务器上以文本文件的形式连续生成的，因此我编写了一个 PHP
javascript - D3 直方图
我正在尝试通过一个函数使用 D3 创建一个简单的直方图。图表的 y 值作为数组传递给函数，然后函数创建 svg 和条形图。我得到了正确的轴，但条被切断了。似乎我的矩形 x 值太大而无法放入 svg
c# - Linq 直方图
有没有办法用 linq 做一个分段直方图？我见过几个示例，您可以在其中计算特定对象的出现次数。是否可以创建一个基于 linq 的直方图来计算两个值之间的一系列对象的出现次数？我不知道您将如何按一系列
java - 初学Java(直方图)
我正在参加初级 Java 类(class)，任务是创建一个具有以下输出的直方图程序:(100 和 10 是用户输入)。有多少个数字？ 100 间隔多少？ 10 Histogram ---------
iphone - 核心图 - 直方图
如何使用 corePlot 实现直方图。实际上，我正在尝试使用条形图。在条形图中是否有任何选项可以对我的值进行分组。例如:所以我只能打印 3 条。这样值应该像这样分组: X 0...5: B
MySQL根据值范围(直方图)进行任意分组的方法
我有一个简单的数据集，其中脚本需要时间来完成各个步骤。时间是不可预测的，但主要分组在特定的时间范围内，但我想以十分之一秒的分组来绘制图表。 (我知道这很奇怪，这是一些报告可视化内容的要求)。我可以将我

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - Google ChartWrapper 不适用于直方图