方法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軸ラベルを手動で編集する
3番目の方法は最も柔軟性がありますが、最も多くの作業が必要です。カスタム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];
}
});
}