하이 차트 데이터를 동적으로 채우기

Question

동적으로 하이 차트 데이터를 채우려는 백본 마리오 네트 앱을 가지고 놀고 있지만 문제가 있습니다.

기본 설문 조사 앱을 만들었으며 각 질문의 결과를 보여주는 차트를 만들고 싶습니다. 그러나 설문 조사에 몇 가지 질문이 있거나 각 질문에 몇 가지 대답이 있을지 모릅니다.

questions: (survey) => 
     questions = survey.get('questions') 
     questions.each (question) => 
     length = question.get('answers').length 
     answers = question.get('answers') 
     answerArray = [] 
     if length < 7 
      question.get('answers').each (answer) -> 
      answerArray[answer.id] = 0 

     survey.get('responses').each (response) => 
      date = Math.floor(new Date(response.get('created_date'))/86400000) 
      if date > (@minDate - 1) && date < (@maxDate + 1) 
      if response.get('completed') 
       choices = response.get('choices') 
       choices.each (choice) -> 
       if choice.get('question_id') == question.get('id') 
        answerArray[choice.get('answer_id')] = answerArray[choice.get('answer_id')] + 1 

이제 highcharts 차트는 다음과 같이 채워집니다 :

$('#' + question.get('id')).highcharts({ 
      chart: { 
      marginRight: 50, 
      marginTop: 0, 
      plotBackgroundColor: null, 
      plotBorderWidth: null, 
      plotShadow: false 
      }, 
      title: { 
      text: '', 
      style: { 
       fontSize: 10 
      } 
      }, 
      tooltip: { 
      pointFormat: '<b>{point.percentage:.1f}%</b>' 
      }, 
      credits: { 
      enabled: false 
      }, 
      exporting: { 
      enabled: true 
      }, 
      plotOptions: { 
      pie: { 
       size: 300, 
       allowPointSelect: true, 
       cursor: 'pointer', 
       dataLabels: { 
       enabled: false 
       }, 
       showInLegend: true 
      } 
      }, 
      series: [{ 
      type: 'pie', 
      name: question.get('title'), 
      states: { 
       hover: { 
       brightness: 0 
       } 
      }, 
      data: [ 
       { 
       name: "14-17", 
       y: 22, 
       color: "#E8DF66" 
       }, 
       { 
       name: "18-24", 
       y: 42, 
       color: "#8C8C8B" 
       }, 
       { 
       name: "25-34", 
       y: 11, 
       color: "#687D68" 
       }, 
       { 
       name: "35-44", 
       y: 55, 
       color: "#217C7E" 
       }, 
       { 
       name: "45-54", 
       y: 231, 
       color: "#BEE7E8" 
       }, 
       { 
       name: "55+", 
       y: 224, 
       color: "#634357" 
       } 
      ] 
      }] 
     }) 

그래서 내가 채울 수 있어요

그래서 내가하는 일은이 같은이 answerArray[answerId] = numberOfTimesSelected과 같은 배열을 채울 것입니다 그 정적 데이터로 각 질문에 대한 그래프. 그러나 데이터를 동적으로 변경하는 방법이 필요합니다. 예 :

data: [ question.get('answers').each (answer) -> 
       { 
       name: answer.get('title'), 
       y: answerArray[answer.get('id')], 
       color: "#E8DF66" 
       } 
     ] 

그러나 실제로는 작동하지 않습니다. 내가 어떻게 그런 짓을 할 수 있겠 어?

Answer 1

그래서 각각에 대한 객체를 동적으로 생성 한 다음 해당 배열을 만들어 데이터로 사용합니다.

어레이/오브젝트 만들기 : highcharts 그래프

graphData = [] 
     question.get('answers').each (answer) -> 
      graphPiece = {} 
      graphPiece["name"] = answer.get('title') 
      graphPiece["y"] = answerArray[answer.get('id')] 
      graphPiece["color"] = "#E8DF66" 
      graphData.push(graphPiece) 

사용하는 데이터 :

series: [{ 
      type: 'pie', 
      name: question.get('title'), 
      states: { 
       hover: { 
       brightness: 0 
       } 
      }, 
      data: graphData 
      }] 

을