Highcharts: Comment créer une tarte éclatée de groupe d'âge, sexe, visites?

Question

Est-il possible de créer un graphique éclaté avec graphiques hauts pour un ensemble de données CSV ayant un groupe d'âge, un sexe et des visites en tant que données? J'ai essayé de faire ça comme ça, mais tout ce que j'ai eu, c'est un bazar avec juste des erreurs.

var options = { 
chart: { 
    type: 'column' 
}, 
title: { 
    text: 'Basic drilldown' 
}, 
xAxis: { 
    type: 'category' 
}, 

legend: { 
    enabled: false 
}, 

plotOptions: { 
    series: { 
     borderWidth: 0, 
     dataLabels: { 
      enabled: true 
     } 
    } 
}, 

series: [{ 
    name: 'People', 
    colorByPoint: true, 
    data: [{ 
     name: 'Age group', 
     y: [], 
     drilldown: 'Agegroup' 
    }, { 
     name: 'Gender', 
     y: [], 
     drilldown: 'Gender' 
    }, { 
     name: 'Sessions', 
     y: [], 
     drilldown: 'Sessions' 
    }] 
}], 
drilldown: { 
    series: [{ 
     id: 'Agegroup', 
     data: [] 
    }, { 
     id: 'Gender', 
     data: [] 
    }, { 
     id: 'Sessions', 
     data: [] 
    }] 
} 
}; 

var lines = csv.split('\n'); 
$.each(lines, function (lineNo, line) { 
    var items = line.split(','); 
    var agegroup=items[0]; 
    var gender=items[1]; 
    var sessions=parseInt(items[2]); 
    options.drilldown.series.data.push([gender,sessions]); 

Les données CSV pour ce suit:

18-24,female,313,1 
18-24,male,209,1 
25-34,female,1941,1 
25-34,male,1646,1 
35-44,female,980,1 
35-44,male,1000,1 
45-54,female,244,1 
45-54,male,272,1 
55-64,female,106,1 
55-64,male,104,1 
65+,female,36,1 
65+,male,52,1 

Answer 1

Essayez cette

var yMale, yFemale; 
var sessionDataMale = []; 
var sessionDataFemale = []; 
var ageGroup = [] 
$.get('data.csv', function(data) { 
     var lines = csv.split('\n'); 
     $.each(lines, function(lineNo, line) { 
      var items = line.split(','); 
      var agegroup = items[0]; 
      var gender = items[1]; 
      var sessions = parseInt(items[2]); 

      if (gender == male) { 
      yMale += sessions; 
      sessionDataMale.push(sessions) 
      } 
      if (gender == female) { 
      yFemale += sessions 
      sessionDataFemale.push(sessions) 
      } 
      ageGroup.push(agegroup) 
     } 
//creating uniue age group array 
var uniqueAgeGroups = []; $.each(ageGroup, function(i, el) { 
if ($.inArray(el, uniqueAgeGroups) === -1) uniqueAgeGrops.push(el); 
     }); 
     var drillDataMale = [] 
     var drillDataFemale = [] 

     for (var i = 0; i < uniqueAgeGroups.length; i++) { 
      var arrMale = []; 
      var arrFemale = [] 
      arrMale.push([uniqueAgeGroups[i], sessionDataMale[i]]) 
      arrFemale.push([uniqueAgeGroups[i], sessionDataFemale[i]]) 
      drillDataMale.push(arrMale) 
      drillDataFemale.push(arrFemale) 
     } 
    ) 
    } 
    // Create the chart 
    Highcharts.chart('container', { 
     chart: { 
     type: 'pie' 
     }, 
     title: { 
     text: 'Test' 
     }, 
     plotOptions: { 
     series: { 
      dataLabels: { 
      enabled: true, 
      format: '{point.name}: {point.y}' 
      } 
     } 
     }, 

     tooltip: { 
     headerFormat: '<span style="font-size:11px">{series.name}</span><br>', 
     pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y}</b> of total<br/>' 
     }, 
     series: [{ 
     name: 'Gender', 
     colorByPoint: true, 
     data: [{ 
      name: 'Female', 
      y: yFemale, 
      drilldown: 'female' 
     }, { 
      name: 'Male', 
      y: yMale, 
      drilldown: 'male' 
     }], 
     }], 
     drilldown: { 
     series: [{ 
      name: 'Age Group', 
      id: male, 
      data: drillDataMale 
     }, { 
      name: 'Age Group', 
      id: female, 
      data: drillDataFemale 
     }] 
     } 
    });