http://www.zingchart.com/docs/chart-types/pie/#pie__trellis_chartに似たトレリススタイルの円グラフ（同じグリッド内の複数の円グラフ）があります。私が使用しているコードは、そのページにあるものと非常によく似ています。ZingChartのTrellis Pie Chartのタイトル
各円グラフに固有のタイトルを付けたいと思います。たとえば、4つの円グラフがあり、それぞれの円が異なる年の四半期を表す場合、最初の数字は「Q1」、2番目の「Q2」などとなります。
トレリス型の円グラフは使用できません各円のタイトルオブジェクト。 2つのオプションがここにあります
A）トレリスとスティックとあなたのタイトルのために個別に配置さ/スタイルのラベルを使用します。代わりにトレリスを使用しての
labels:[
{
text:"Title 1",
x: "22%",
y: "10%",
fontSize: 16
},
{
text:"Title 2",
x: "71%",
y: "10%",
fontSize: 16
},
{
text:"Title 3",
x: "22%",
y:"54%",
fontSize: 16
},
{
text: "Title 4",
x: "71%",
y:"54%",
fontSize: 16
}
],
Full demo of the trellis pie chart with individually styled labels.
B）を、4でgraphsetを使用円グラフ。この方法で、各パイのタイトルオブジェクトにアクセスできます。
var myConfig = {
"graphset": [{
"type": "pie",
"title": {
"text": "Title 1"
},
"series": [{
"values": [59]
}, {
"values": [55]
}, {
"values": [30]
}, {
"values": [28]
}, {
"values": [15]
}]
}, {
"type": "pie",
"title": {
"text": "Title 2"
},
"series": [{
"values": [60]
}, {
"values": [40]
}, {
"values": [35]
}, {
"values": [30]
}, {
"values": [20]
}, ]
}, {
"type": "pie",
"title": {
"text": "Title 3"
},
"series": [{
"values": [50]
}, {
"values": [40]
}, {
"values": [30]
}, {
"values": [20]
}, {
"values": [10]
}, ]
}, {
"type": "pie",
"title": {
"text": "Title 4"
},
"series": [{
"values": [40]
}, {
"values": [55]
}, {
"values": [49]
}, {
"values": [40]
}, {
"values": [16]
}, ]
}]
};
zingchart.render({
id: 'myChart',
data: myConfig,
height: 400,
width: 600
});<script src="http://cdn.zingchart.com/zingchart.min.js"></script>
<div id="myChart"></div>デモを見るために上記のスニペットを実行します。
私はZCチームに所属しています。私たちは助けに来ました！
このアプローチを使用したもう1つの質問。各円グラフが互いに独立しているため、ページ上のすべての円グラフに適用される単一のラベルを追加するにはどうすればよいですか？ –
実際には、私はグラフセット手法ではできないたくさんのことがあります。（1）単一の凡例を追加します。私はそれを行うための管理をしていますが、伝説には実際に存在するシリーズよりも多くのシリーズが含まれています。 （2）すべての円グラフを1つの水平軸に表示する方法。 （3）カスタムフォーマットに基づいてそれぞれのツールチップを設定します。 （4）各円の全体量に基づいて各円グラフの相対的なサイズを設定する。サイズファクタが機能していません。 –
ここZCチームメンバーです。ご質問のためにデモを行っています。 – RockinSocks