Highcharts: как создать детальную диаграмму возрастной группы, пола, посещений?

Можно ли создать круговую диаграмму детализации с высокими диаграммами для набора данных csv, в котором в качестве данных указаны возрастная группа, пол и посещения? Я пытался сделать это так, но все, что я получил, это беспорядок с ошибками.

 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]);

Данные CSV для этого следующие:

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

javascript highcharts drilldown
person Shadowcaster    schedule 20.03.2017    source источник
comment
какие ошибки консоли загрузите скрин шорт   -  person Deep 3015    schedule 20.03.2017
comment
Пытаюсь протолкнуть это: code 18-24,женщина,313 18-24,мужчина,209 25-34,женщина,1941 code Я получаю ошибки push в консоли.   -  person Shadowcaster    schedule 20.03.2017
comment
обновите код, в котором вы нажимаете и создаете массив   -  person Deep 3015    schedule 20.03.2017
comment
Я знаю, что сейчас это выглядит совершенно неправильно, но это потому, что я заблудился. То, что я пытаюсь сделать, это создать круговую развертку, показывающую первоначально посещения мужчин и женщин, а затем, щелкнув любой из них, вы попадете в разбивку по возрастным группам. В моем CSV есть такие данные, как возрастная группа, пол, сеансы. Это возможно?   -  person Shadowcaster    schedule 20.03.2017
comment
Можете ли вы вставить данные csv сюда?   -  person morganfree    schedule 20.03.2017
comment
@Shadowcaster jsfiddle.net/qeuaxn8x/1 примерно так   -  person Deep 3015    schedule 20.03.2017
comment
@ Deep3015, да, это то, что я хочу создать, но путем добавления значений y и данных из моего CSV.   -  person Shadowcaster    schedule 20.03.2017
comment
@Deep3015 Deep3015, можно ли присвоить y сумму ряда вместо предоставления ему значения?   -  person Shadowcaster    schedule 20.03.2017
comment
@Shadowcaster попробуйте этот jsfiddle.net/4rpcd5oc и прокомментируйте, работает он или нет. я не могу это проверить   -  person Deep 3015    schedule 20.03.2017
comment
@Deep3015 Замечательно! Всего пара изменений, и он работает как шарм! Большое спасибо за вашу неоценимую помощь!   -  person Shadowcaster    schedule 21.03.2017

Ответы (1)


arrow_upward
1
arrow_downward

Попробуй это

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
        }]
      }
    });
person Deep 3015    schedule 21.03.2017
comment
Работает отлично! Благодарю вас! - person Shadowcaster; 21.03.2017