Google ChartWrapper不适用于直方图
我正在关注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();
但它不起作用，我收到了以下错误：
列索引无效1.应该是[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
}
]
}
]
};
}
1 个答案:
答案 0 :(得分：1)
直方图的data format确实显示数据表中至少需要两列数据
Histogram必须以不同于ChartWrapper的方式处理数据
最有可能使用两个列的单个值
一个简单的解决方法是在ChartWrapper上添加一个视图，
并为两个列使用相同的索引......
let wrapper = new google.visualization.ChartWrapper({
chartType: 'Histogram',
dataTable: data,
options: options,
containerId: "example_chartwrapper",
view: { // <-- add view
columns: [0, 0]
}
});
请参阅以下工作代码段...
＆＃13;
＆＃13;
＆＃13;
＆＃13;
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>
或者只是在加载数据表时对两列使用相同的值...
＆＃13;
＆＃13;
＆＃13;
＆＃13;
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>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？