google-visualization - 如何结合气泡图和折线图？

Question

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

Answer 1

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

如帮助文档所述，组合图表支持以下图表类型seriesType：

series 属性中未指定的任何系列的默认线型。可用值是“line”、“area”、“bars”、“candlesticks”和“steppedArea”。

由于也不支持散点 (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哭的步骤）

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

第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    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（因此每个项目都是一个点）。

pointSize第 4 步：为气泡系列设置气泡大小。不幸的是，整个系列将具有相同的pointSize. 所以在上面的例子中，我们需要重新格式化我们的格式DataTable，让每个不同的气泡在不同的系列中（更多的列），或者编写一个函数来为每个不同的气泡大小创建一个新的系列。然后我们可以使用气泡大小系列pointSize为每个不同的系列设置。

两种解决方案都应该有效，具体取决于您的应用程序和数据的复杂性，您应该选择最有效的解决方案。让我们知道你最终会做什么，因为我相信将来会有人使用它！

Answer 2

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