方法 1：多个图表
这可能是最简单的概念（尽管仍然很麻烦）。
概括：
- 将数据分组（消除差距）
- 为每个组创建单独的图表
- 消除第一个之后的每个图表的 vAxis 标签
- 创建一致的 vAxis 最小值/最大值
- 使用 CSS 将图表并排排列
细节：
如果你有一个静态数据集，你可以手动拆分它。如果它不是静态的，那么您必须编写一些 javascript 来拆分您的数据。由于我不知道您的数据是如何工作的，因此我在这里无法真正帮助您。
至于设置图表，我将由您决定。我不知道您希望它们如何格式化，所以我无法真正帮助您了解当前信息。
要为所有图表创建一致的轴值，您需要在 javascript 函数中使用一些基本数学来为每个 vAxis 最大值/最小值分配相同的数字。这是一个示例：
// 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;
方法2：多个系列
只要查看您的数据的人了解他们是不同的集合，那么轴就没有理由需要说出确切的日期/时间，只要他们可以在其他地方轻松弄清楚。
概括：
- 将每个“序列”的数据分成不同的系列
- 人为地缩短序列之间的间隔（如果每个序列是 15 秒，那么序列之间有 5 秒的间隔，或者每 15 秒开始一次）
- 运行开始/结束时使用名称标签格式化每个不同的系列
细节：
同样，您必须手动拆分数据或创建 javascript 来执行此操作，但您要做的是将每组数字移动到自己的列中，如下所示：
1360096658270, 10.228335, null
1360096658274, 10.308437, null
1360096658277, 10.294770, null
[...]
1360096673968, 9.014943, null
1360096673969, 8.971434, null
1360096673970, 9.041739, null
1360096673971, 9.097484, null
^^-- 15 seconds
<--- (~10 days)
1360989176509, null, 9.856928
1360989176513, null, 9.852907
1360989176517, null, 9.861740
1360989176523, null, 9.820416
1360989176527, null, 9.871401
这将使每个系列具有不同的颜色（并且在图例中/鼠标悬停时具有不同的标签），因此您可以看到运行之间的差异，但也会得到一个很好的工具提示，说“此数据是从 X 到 Y 收集的”所以如果获取数据的时间很重要，那么它仍然存在（尽管不在 X 轴上）。
这些是最简单的方法。
方法 3：手动编辑 X 轴标签
第三种方式最灵活，但也需要最多的工作。您可以创建自定义 javascript 函数来操作 SVG 中的 X 轴标签。@jeffery_the_wind在此提供更多详细信息：
/*
*
* The following 2 functions are a little hacky, they have to be done after calling the "draw" function
* The bubble chart originally displays only numbers along the x and y axes instead of customer or product names
* These 2 functions replace those numbers with the words for the customers and products
*
*/
for ( var i = -2; i < products.length + 1; i ++ ){
$('#customer_product_grid svg text[text-anchor="start"]:contains("'+i+'")').text(function(j,t){
if (t == i){
if (i >= products.length || i < 0){
return " ";
}
return products[i];
}
});
}
for ( var i = -2; i <= customers.length + 3; i ++ ){
$('#customer_product_grid svg text[text-anchor="end"]:contains("'+i+'")').text(function(j,t){
if (i >= customers.length + 1 || i <= 0){
return " ";
}else if (t == i){
return customers[i-1];
}
});
}