5
Per esempio la mia tabella sarebbe come questo:Come faccio a rendere ogni riga in una tabella HTML un grafico a torta in Highcharts?
agree neutral disagree
q1 10 4 4
q2 16 1 1
q3 18 0 0
q4 15 2 1
q5 13 5 0
e vorrei fare q1 un grafico a torta con un accordo, neutro, e d'accordo come i diversi settori, e allo stesso modo per q2, q3..etc.
<script type="text/javascript">
$(function() {
var chart;
$('#container').highcharts({
data: {
table: document.getElementById('datatable')
},
chart: {
type: 'column'
},
title: {
text: ''
},
yAxis: {
allowDecimals: false,
title: {
text: 'Persons'
}
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.point.y +' individuals said '+ this.point.name.toLowerCase();
}
},
});
});
/**********************************************
**********************************************/
$(function() {
var chart;
$('#container2').highcharts({
data: {
table: document.getElementById('datatable')
},
chart: {
type: 'pie'
},
title: {
text: ''
},
yAxis: {
allowDecimals: false,
title: {
text: 'Persons'
}
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.point.y +' individuals said '+ this.point.name.toLowerCase();
}
},
});
});
/**********************************************/
/**********************************************/
$(function() {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container3',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
margin: [0, 0, 0, 0],
spacingTop: 0,
spacingBottom: 0,
spacingLeft: 0,
spacingRight: 0
},
title: {
text: ''
},
tooltip: {
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
}
},
legend: {
enabled:true
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
size: '50%',
dataLabels: {
enabled: false
}
}
},
series:
[
{
type: 'pie',
name: 'testname1',
center: [70, 140],//+130 to the x-axis
showInLegend:true,
data: [
['Commerce', 33.0],
['Engineering', 32.3],
{
name: 'Financial Services',
y: 18.8,
sliced: true,
selected: true
},
['Logistics, Aviation & Shipping', 5.5],
['Seafood & Marine', 9.2],
['Corporate Services & others', 1.2]
]
}
,{
type: 'pie',
name: 'testname2',
center: [200, 140],
showInLegend:false,
data: [
['Commerce', 33.0],
['Engineering', 32.3],
{
name: 'Financial Services',
y: 18.8,
sliced: true,
selected: true
},
['Logistics, Aviation & Shipping', 5.5],
['Seafood & Marine', 9.2],
['Corporate Services & others', 1.2]
]
},
{
type: 'pie',
name: 'testname3',
center: [330, 140],
showInLegend:false,
data: [
['Commerce', 33.0],
['Engineering', 32.3],
{
name: 'Financial Services',
y: 18.8,
sliced: true,
selected: true
},
['Logistics, Aviation & Shipping', 5.5],
['Seafood & Marine', 9.2],
['Corporate Services & others', 1.2]
]
},
{
type: 'pie',
name: 'testname4',
center: [460, 140],
showInLegend:false,
data: [
['Commerce', 33.0],
['Engineering', 32.3],
{
name: 'Financial Services',
y: 18.8,
sliced: true,
selected: true
},
['Logistics, Aviation & Shipping', 5.5],
['Seafood & Marine', 9.2],
['Corporate Services & others', 1.2]
]
},
{
type: 'pie',
name: 'testname5',
center: [590, 140],
showInLegend:false,
data: [
['Commerce', 33.0],
['Engineering', 32.3],
{
name: 'Financial Services',
y: 18.8,
sliced: true,
selected: true
},
['Logistics, Aviation & Shipping', 5.5],
['Seafood & Marine', 9.2],
['Corporate Services & others', 1.2]
]
},
{
type: 'pie',
name: 'testname6',
center: [720, 140],
showInLegend:false,
data: [
['Commerce', 33.0],
['Engineering', 32.3],
{
name: 'Financial Services',
y: 18.8,
sliced: true,
selected: true
},
['Logistics, Aviation & Shipping', 5.5],
['Seafood & Marine', 9.2],
['Corporate Services & others', 1.2]
]
},
{
type: 'pie',
name: 'testname7',
center: [850, 140],
showInLegend:false,
data: [
['Commerce', 33.0],
['Engineering', 32.3],
{
name: 'Financial Services',
y: 18.8,
sliced: true,
selected: true
},
['Logistics, Aviation & Shipping', 5.5],
['Seafood & Marine', 9.2],
['Corporate Services & others', 1.2]
]
},
{
type: 'pie',
name: 'testname8',
center: [980, 140],
showInLegend:false,
data: [
['Commerce', 33.0],
['Engineering', 32.3],
{
name: 'Financial Services',
y: 18.8,
sliced: true,
selected: true
},
['Logistics, Aviation & Shipping', 5.5],
['Seafood & Marine', 9.2],
['Corporate Services & others', 1.2]
]
}
]
},function(chart) {
$(chart.series[0].data).each(function(i, e) {
e.legendItem.on('click', function(event) {
var legendItem=e.name;
event.stopPropagation();
$(chart.series).each(function(j,f){
$(this.data).each(function(k,z){
if(z.name==legendItem)
{
if(z.visible)
{
z.setVisible(false);
}
else
{
z.setVisible(true);
}
}
});
});
});
});
});
});
});
</script>
NOTA: il primo grafico recupera correttamente i dati dalla tabella che sto utilizzando.
Gli altri due sono il mio tentativo di provare a rispondere alla mia domanda.
Ecco il risultato del codice che ho postato:
http://tinypic.com/r/11uyj3s/8
inoltre, c'è un modo per rendere i grafici a torta uno accanto all'altro come in questo esempio ... http://www.highcharts.com/ demo/column-parsed – people
Mostraci cosa hai provato. – Zangdak
Ho provato un sacco di cose lol. Modificherò il mio post con i tre grafici diversi che ho – people