バブル チャートを作成し、線を引いてバブルを 2 つの領域 (線の下と上) に分けようとしています。Google の視覚化バブルと折れ線グラフを組み合わせることができますか? そうでない場合、Google ビジュアライゼーションに代わるものはありますか?
3830 次
2 に答える
1
このcombochartチャート タイプは現在、バブル チャートをサポートしていません。つまり、そのように組み合わせることはできません。
ヘルプ ドキュメントに記載されているように、次のチャート タイプが のコンボ チャートでサポートされていseriesTypeます。
シリーズ プロパティで指定されていないシリーズのデフォルトの線種。利用可能な値は、'line'、'area'、'bars'、'candlesticks'、'steppedArea' です。
散布図 (XY) チャートもサポートされていないため、一連のシリーズを作成したり、バブルのサイズを手動で変更したりするような奇妙なことはできません。したがって、もっとトリッキーなことを試す必要があります。
オプション 1: ファンキーな CSS
注: これは、多くのバージョンの IE では確実に機能しません。
ステップ 1: 同じサイズの 2 つの重なり合う<div>要素を作成します。
ステップ 2: 同じ chartArea オプションを使用して、2 つの別個の 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;
backgroundColor: "transparent"ステップ 4: 上の<div>要素を使用して、背景色を透明に設定します。（これはIEを泣かせるステップです）
<div>ステップ 5: 2 つの重なり合う要素で、同じ縮尺の軸を使用して両方のグラフを描画します。
ステップ 6: 正しく見えるかどうかを確認します。ブラウザーによっては、要素が重なり合っているため、対話性が少し苦痛になる場合があります。<div>選択可能なグラフ要素の 1 つがホバーされていないときに、一番上のグラフの 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 値が必要であり、さまざまなシリーズに多数の null 値が必要です。
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 に設定して、2 つのシリーズの XY 値のみをプロットします (列 3 はバブル サイズであり、追加のシリーズとして表示したくないものです)。
ステップ 3: 各シリーズのオプションを設定します。シリーズ 1 (折れ線グラフ) にはlineWidth: 1必要なものがあり、シリーズ 2 にはlineWidth: 0(各項目がポイントになるように) があります。
pointSizeステップ 4:バブル シリーズのバブル サイズを設定します。残念ながら、シリーズ全体で同じpointSize. したがって、上記の例ではDataTable、異なるシリーズ (より多くの列) にそれぞれの異なるバブルを配置するように再フォーマットするか、異なるバブル サイズごとに新しいシリーズを作成する関数を記述する必要があります。次に、バブル サイズ シリーズを使用して、pointSize異なるシリーズごとに を設定できます。
アプリケーションとデータの複雑さに応じて、どちらのソリューションも機能するはずです。最適なソリューションを選択する必要があります。将来誰かがそれを使うと確信しているので、あなたが最終的に何をするのか教えてください!
于 2013-02-15T01:43:17.140 に答える