如何将气泡图和折线图结合起来？
我试着画一张气泡图，画一条线，将气泡分成两个区域，一个在线下，一个在线上。那么，我可以将谷歌的可视化泡泡和折线图结合起来吗？如果没有，除了google可视化，还有其他选择吗？
回答 2
Stack Overflow用户
发布于 2013-02-15 09:43:17
combochart图表类型当前不支持气泡图。这意味着您无法以这种方式将它们组合在一起。
作为the help documents state，seriesType的组合图表支持以下图表类型
未在系列属性中指定的任何系列的默认线型。可选值为'line'，'area'，‘bar’，'candlesticks‘和'steppedArea’。
因为散点(XY)图也不受支持，所以你不能做一些时髦的事情，比如做一堆序列和手动改变气泡的大小。所以你需要尝试一些更棘手的东西。
选项1:时髦的CSS
注意:这绝对不会在IE的许多版本上工作。
步骤1:创建两个相同大小的重叠<div>元素。
步骤2:使用相同的chartArea选项设置两个单独的Google Visualization图表的格式。
步骤3:创建一个函数来确定两个图表的最大/最小值，以确保它们在相同的比例上。
示例：
// Take the Max/Min of all data values in all graphs
var totalMax = 345;
var totalMin = -123;
// Figure out the largest number (positive or negative)
var biggestNumber = Math.max(Math.abs(totalMax),Math.abs(totalMin));
// Round to an exponent of 10 appropriate for the biggest number
var roundingExp = Math.floor(Math.log(biggestNumber) / Math.LN10);
var roundingDec = Math.pow(10,roundingExp);
// Round your max and min to the nearest exponent of 10
var newMax = Math.ceil(totalMax/roundingDec)*roundingDec;
var newMin = Math.floor(totalMin/roundingDec)*roundingDec;
// Determine the range of your values
var range = newMax - newMin;
// Define the number of gridlines (default 5)
var gridlines = 5;
// Determine an appropriate gap between gridlines
var interval = range / (gridlines - 1);
// Round that interval up to the exponent of 10
var newInterval = Math.ceil(interval/roundingDec)*roundingDec;
// Re-round your max and min to the new interval
var finalMax = Math.ceil(totalMax/newInterval)*newInterval;
var finalMin = Math.floor(totalMin/newInterval)*newInterval;步骤4:为顶部的<div>元素使用backgroundColor: "transparent"将背景颜色设置为透明。(这一步让IE哭了)
步骤5:在两个重叠的<div>元素中，使用相同的缩放轴绘制两个图表。
第六步:看看它看起来是否正确。根据浏览器的不同，交互性可能有点麻烦，因为元素重叠。您可能需要为顶部图表编写自己的奇特代码，以便在一个可选图表元素未悬停时将该<div>的Z索引移到后面。
选项2:散点图有趣的
这在IE中也可以工作，而且不那么棘手，但在数据方面设置起来会困难得多。
步骤1:在DataTable中创建折线图系列和气泡图点。如何设置它将根据您的数据以及您希望气泡/线如何排列而发生巨大变化。
示例：
我想要这些气泡：
X Y Size
1 2 3
2 3 4
3 4 5
4 5 1
5 1 2但我想要这句话：
X Y
1.2 5
2.3 4
3.4 3
4.5 2
5.6 1然后，我需要在第一列中包含所有这些不同的X值，并为各个序列提供大量空值，如下所示：
X Line Bubble Size
1 null 2 3
2 null 3 4
3 null 4 5
4 null 5 1
5 null 1 2
1.2 5 null null
2.3 4 null null
3.4 3 null null
4.5 2 null null
5.6 1 null null步骤2:将视图设置为第1/2列，以便仅绘制这两个系列的XY值(第3列是气泡尺寸，您不希望将其显示为额外的系列)。
步骤3:设置每个系列的选项。系列1(折线图)将有lineWidth: 1或您想要的任何东西，系列2将有lineWidth: 0 (因此每一项都是一个点)。
步骤4:使用pointSize为气泡系列设置气泡大小。不幸的是，整个系列都会有相同的pointSize。因此，在上面的示例中，我们需要重新格式化DataTable，使每个不同的气泡处于不同的系列(多得多的列)中，或者编写一个函数，为每个不同的气泡大小创建一个新的系列。然后，我们可以使用气泡大小系列来为每个不同的系列设置pointSize。
任何一种解决方案都应该有效，这取决于您的应用程序和数据的复杂性，您应该选择哪种解决方案最有效。让我们知道你最终会做什么，因为我相信将来会有人用到它！
Stack Overflow用户
发布于 2013-05-23 19:31:20
编辑:完全迷惑的论坛，回答了Excel的问题。
https://stackoverflow.com/questions/14866261
复制相似问题
腾讯云开发者
