2015-12-28 9 views
5

Mam wykres kołowy w stylu kratę (wiele wykresów kołowych w tej samej siatce), podobny do http://www.zingchart.com/docs/chart-types/pie/#pie__trellis_chart. Kod, którego używam, jest bardzo podobny do tego, który znajduje się na tej stronie.Tytuł wykresów kołowych Trellisa w ZingChart

Chcę umieścić unikalny tytuł na każdym wykresie kołowym. Na przykład, jeśli istnieją 4 wykresy kołowe, a każde ciasto przedstawia inny kwartał roku, to pierwszy powiedziałby "Q1", drugi "Q2" itd.

Odpowiedz

8

Wykresy kołowe w stylu Trellis nie mogą być używane tytuł obiektu dla każdego ciasta. Istnieją dwie możliwości:

A) stick z krata i używać pojedynczo rozmieszczone/urządzone etykiet dla swoich tytułów:

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) zamiast korzystania krata, użyj graphset z 4 wykresy kołowe. W ten sposób masz dostęp do obiektu tytułowego dla każdego ciasta.

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>

Uruchom fragment powyżej, aby zobaczyć demo.

Jestem członkiem zespołu ZC. Jesteśmy tutaj, aby pomóc!

+0

Jeszcze jedno pytanie z tym podejściem. Jak dodać pojedynczą etykietę, która będzie miała zastosowanie do wszystkich wykresów kołowych na stronie, biorąc pod uwagę, że każdy wykres kołowy jest od siebie niezależny? –

+0

W rzeczywistości mam kilka rzeczy, których nie mogę zrobić z podejściem graphset: (1) dodać jedną legendę. W pewnym sensie udało mi się to zrobić, ale legenda zawiera dużo więcej serii niż faktycznie istnieje. (2) jak wyświetlić wszystkie wykresy kołowe na jednej osi poziomej. (3) ustaw podpowiedzi dla każdego na podstawie niestandardowego formatu. (4) ustawić względną wielkość każdego wykresu kołowego w oparciu o ogólną kwotę w każdym wykresie kołowym. współczynnik rozmiaru nie działa. –

+0

Członek zespołu ZC tutaj - pracujemy nad demo dla twoich pytań. – RockinSocks

Powiązane problemy