Question

我正在尝试制作一个气泡图并绘制一条线来将气泡分成两个区域，一个位于线下方，一个位于其上方。那么我可以结合谷歌的可视化泡泡和折线图吗？如果没有谷歌可视化的其他替代方案？

Answer 1

combochart图表类型目前不支持气泡图。这意味着你将无法以这种方式组合它们。

作为the help documents state，seriesType的组合图表支持以下图表类型：

系列中未指定的任何系列的默认线型属性。可用值为'line'，'area'，'bars'，'candlesticks' 和'stepsArea'。

由于不支持散点图（XY），你不能做一些像制作一堆系列和手动改变气泡大小的时髦。所以你需要尝试一些比较棘手的事情。

选项1：时髦的CSS

注意：这绝对不会适用于许多版本的IE。

步骤1：创建2个相同大小的重叠<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：使用backgroundColor: "transparent"为背景上的<div>元素将背景颜色设置为透明。（这是让IE哭的步骤）

步骤5：在两个重叠的<div>元素中使用相同的缩放轴绘制两个图表。

第6步：看看它是否正确。由于重叠元素，取决于浏览器，交互性可能有点痛苦。您可能需要为顶部图表编写自己的花式代码，以便在其中一个可选图表元素未被悬停时将<div>的Z-index移动到后面。

选项2：分散图表乐趣

这也适用于IE，并且不那么棘手，但设置数据会更加困难。

第1步：在DataTable中创建折线图系列和气泡图点。如何设置它将根据您的数据以及您希望气泡/线如何排列而发生显着变化。

样品：

我想要这些气泡：

X    Y    Size
1    2    3
2    3    4
3    4    5
4    5    1
5    1    2

但我想要这一行：

然后我需要在第一列中包含所有这些不同的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。

根据您的应用程序和数据的复杂性，任何一种解决方案都应该可行，您应该选择最适合的解决方案。让我们知道你最终会做什么，因为我相信将来会有人使用它！

Answer 2

编辑：完全混淆论坛，回答了Excel的问题。

如何结合泡泡线图？

2 个答案: