代码之家 › 专栏 › 技术社区 › MAESTRO_DE

google图表中具有不同数量数据集的多行

google-visualization charts arrays javascript

MAESTRO_DE · 技术社区 · 6 年前

在google图表中,我想显示3个不同的行。但是他们没有相同数量的数据点。

下面的图片是用excel图表制作的,这样你可以更好地理解我的问题。

灰色线只有两个数据点,橙色线一直到5,蓝色线有完整的数据集。

现在来谈谈我真正的计划: 在google图表中,我也尝试了同样的方法,所以我的dataarray看起来是这样的(有4行):

["20180629", 24.5, 28, 27.52, 24.6],
["20180630", 23, 28, 23.57, 24.4],
["20180701", 22.6, 26, 23, 23.5],
["20180702", 23, 25, 22.44, 23.5],
["20180703", 25.1, 28, 24.43, 26.3],
["20180704", 27.6, 30, 24.59, 21.4],
["20180705", 28.9, 24.1, 23.8, ],
["20180706", 24.4, , , ],
["20180707", 23.7, , , ],
["20180708", 24.8, , , ]

所以你可以看到,从20180629到20180704有完整的数据集,20180705有一个丢失,20180707和20180708有三个丢失。

这里没有机会显示0,因为这将显示错误的温度图。

Chrome控制台显示此错误:

Uncaught (in promise) Error: Row given with size different than 5 (the number of columns in the table).

1 回复 | 直到 6 年前

WhiteHat 6 年前

你可以用 null 代替空数据点…

["20180629", 24.5, 28, 27.52, 24.6],
["20180630", 23, 28, 23.57, 24.4],
["20180701", 22.6, 26, 23, 23.5],
["20180702", 23, 25, 22.44, 23.5],
["20180703", 25.1, 28, 24.43, 26.3],
["20180704", 27.6, 30, 24.59, 21.4],
["20180705", 28.9, 24.1, 23.8, null],
["20180706", 24.4, null, null, null],
["20180707", 23.7, null, null, null],
["20180708", 24.8, null, null, null]

请参阅以下工作段…

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ["20180629", 24.5, 28, 27.52, 24.6],
    ["20180630", 23, 28, 23.57, 24.4],
    ["20180701", 22.6, 26, 23, 23.5],
    ["20180702", 23, 25, 22.44, 23.5],
    ["20180703", 25.1, 28, 24.43, 26.3],
    ["20180704", 27.6, 30, 24.59, 21.4],
    ["20180705", 28.9, 24.1, 23.8, null],
    ["20180706", 24.4, null, null, null],
    ["20180707", 23.7, null, null, null],
    ["20180708", 24.8, null, null, null]
  ], true);

  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  chart.draw(data);
});

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

推荐文章

Toniq · javascript为php保存多维数组

1 年前

Jannis · Java中数组的怪异行为

1 年前

callum · 如何识别数组中与给定序列不匹配的元素?

1 年前

Gamerboi677 _YT · 如果玩家触摸了某个部分,如何将玩家名称添加到数组中。-Roblox-Lua编码

1 年前

at. · 在一行中创建任意大小的JavaScript/TypeScript 2d数组

1 年前

Rakis Friski · Javascript Spread运算符混淆行为

1 年前

tenfour · 如何使用数组元素的索引初始化数组元素

2 年前

Guillaume · 使用操作从Python列表创建numpy数组

2 年前

maxMas · Swift 5:为什么会出现索引超出范围错误?

2 年前

Sarah Workman · 尝试比较用javascript编程添加的字符串的值

2 年前