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>
ゲージチャートは、カスタマイズにかなりスリムです。あなたはおそらく、CSSと絶対配置を使用して何かをスーパーインポーズすることができますが、私はゲージチャートがライン、バー、エリアのような他のメインチャートのようなレイアウトインターフェースを持っているとは思わない。ゲージを一定の大きさと範囲でレンダリングして動作させる必要があります。個人的には、ゲージの範囲とテキストの説明を示す色付きのボックスで、その隣に伝説を置くだけでしょう。 – nbering
はい、私は彼らが3-4色以上のものを持つようにカスタマイズすることさえできないので、今考えているものです –
ゲージチャートはどこからでも公開されていないので、Googleから多くの愛を得ることはできません。 Googleはこのライブラリを自分で作成し、世界中と共有しています。内部的に価値がある場合は、通常、機能を追加するだけです。 – nbering