2016-10-02 19 views
1

私のページにGoogleゲージチャートを使用しようとしています。今度は、各セクションまたは色のチャートにテキストを追加したいと思います。チャートの中でそれを行うことはできますか?私はいくつかのhtmlの変更をやってみましたが、助けが必要ありません。Googleゲージチャート - 各ゲージセクションのテキストラベルを追加

このリンクからしよう - https://developers.google.com/chart/interactive/docs/gallery/gauge enter image description here

したがって、たとえば、私は上の白い色とのためのテキスト1を追加したいと思います。

+0

ゲージチャートは、カスタマイズにかなりスリムです。あなたはおそらく、CSSと絶対配置を使用して何かをスーパーインポーズすることができますが、私はゲージチャートがライン、バー、エリアのような他のメインチャートのようなレイアウトインターフェースを持っているとは思わない。ゲージを一定の大きさと範囲でレンダリングして動作させる必要があります。個人的には、ゲージの範囲とテキストの説明を示す色付きのボックスで、その隣に伝説を置くだけでしょう。 – nbering

+0

はい、私は彼らが3-4色以上のものを持つようにカスタマイズすることさえできないので、今考えているものです –

+0

ゲージチャートはどこからでも公開されていないので、Googleから多くの愛を得ることはできません。 Googleはこのライブラリを自分で作成し、世界中と共有しています。内部的に価値がある場合は、通常、機能を追加するだけです。 – nbering

答えて

1

は主要が

作業スニペット以下を参照ダニのためのラベルを提供するために、majorTicks設定オプションを使用して...

google.charts.load('current', { 
 
    callback: function() { 
 
    var container = document.getElementById('chart_div'); 
 
    var chart = new google.visualization.Gauge(container); 
 

 
    var data = google.visualization.arrayToDataTable([ 
 
     ['Label', 'Value'], 
 
     ['Memory', 80], 
 
     ['CPU', 55], 
 
     ['Network', 68] 
 
    ]); 
 

 
    var options = { 
 
     width: 600, height: 200, 
 
     redFrom: 90, redTo: 100, 
 
     yellowFrom:75, yellowTo: 90, 
 
     majorTicks: ['A', 'B', 'C', 'D', 'E'], 
 
     minorTicks: 3 
 
    }; 
 

 
    chart.draw(data, options); 
 
    }, 
 
    packages: ['gauge'] 
 
});
<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart_div"></div>

+0

これが役立つことを願っています... – WhiteHat

関連する問題