apexchart 차트 구현 질문드립니다.

Question

apexchart.js 를 사용하여 그래프를 그리고 있습니다. 각 학생의 총 점수는 아래와 같으며 이 점수로 정규 분포 그래프를 그리려 합니다.최소값: 1 / 최대값: 327로 10씩 끊어 0, 10, 20, 30 ..., 310, 320, 330 x 축이 자동으로 생성되고, 각 range 에 해당되는 값이 몇 개인지 나타내는 line & area graph를 그리고 싶습니다. total_score &#61; Score.objects.values('student_id').distinct() \ .annotate(total_score&#61;Count('id', filter&#61;Q(...)))\ .values('total_score')\count_list &#61; []; for s in total_score: count_list.append(str(s['total_score']))Result: ['165', '153', '142', '138', '219', '120', '92', '189', '129', '167', '327', '220', '46', '139', '105', '121', '230', '81', '52', '72', '136', '30', '103', '34', '1'] 우선 x축과 그래프 안의 값들은 total_score 변수를 사용하는 것이 맞는 것 같습니다만..apexchart 공식 문서를 아무리 찾아봐도 제가 원하는 결과를 얻을 수 없어여기 계신 분들께 도움 부탁드립니다!!!var options &#61; { series: [ { name: &#34;명&#34;, data: {{ total_score | safe }} } ], chart: { height: 350, type: 'line', dropShadow: { enabled: true, color: '#000', top: 18, left: 7, blur: 10, opacity: 0.2 }, toolbar: { show: false } }, dataLabels: { enabled: true, }, stroke: { curve: 'smooth' }, grid: { borderColor: '#e7e7e7', row: { colors: ['#f3f3f3', 'transparent'], opacity: 0.5 }, }, markers: { size: 1 }, xaxis: { type: 'category', categories: {{ total_score | safe }}, }, yaxis: { title: { text: '학생 수 (명)' }, min: 5, max: 40 }, legend: { position: 'top', horizontalAlign: 'right', floating: true, offsetY: -25, offsetX: -5 } }; var chart &#61; new ApexCharts( document.querySelector(&#34;#chart&#34;), options ); chart.render();

YERIEL RYU · Answer

xaxis의 categories에 total_score 변수 말고 [ 0, 10, 20, ... , 320] 의 배열을 사용해보시는 것은 어떨까요?

캐발자 · Answer

YERIEL RYU 답변 감사합니다! 말씀 주신 방법도 생각했지만 리스트 내의 값들이 사이트 내에서 자동으로 변하기 때문에최대값을 고정시킬 수 없습니다 ㅜㅜ

Etcetera · Answer

작성자가 생각하시는 차트가 이렇게 맞나요?

apexchart 차트 구현 질문드립니다.

3개의 답변

Q&A 목록