본문 바로가기

비개발자의 개발 일지

현장 팀장에서 수출 ERP까지 — AI와 함께 시스템을 만든 기록

시리즈 보기
반응형

jQuery23

jqPlot 도넛 파이 차트 — fill:false, sliceMargin 완전 정리 Web Development · jQuery + jqPlotjqPlot 도넛 파이 차트 —fill:false · sliceMargin 완전 정리조각 분리 + 외곽선만 — 가벼운 시각 인상시작 오늘 분석할 코드pie-chart.html과 같은 데이터인데 두 가지 옵션이 다르다 — fill: false(외곽선만)와 sliceMargin: 4(조각이 떨어짐). 결과는 채워지지 않은 도넛 같은 모양.$.jqplot('chartdiv', [[['서울',18],['경기',14],['강원',3],['기타',7]]], { title: '원형 그래프 예제', gridPadding: { top: 25, bottom: 38, left: 0, right: 0 }, seriesDefaults: { renderer: $.jqpl.. 2026. 6. 25.
jqPlot 파이 차트 — PieRenderer, legend 완전 정리 Web Development · jQuery + jqPlotjqPlot 파이 차트 —PieRenderer · showDataLabels · legend전체 100%에서 항목별 비중을 한 원에 표시시작 오늘 분석할 코드지역별 인원수를 원형 그래프로 표시한다. 각 조각의 크기로 비중을 보여주고, 라벨/legend로 어느 지역인지 식별한다.var plot1 = $.jqplot('chartdiv', [[['서울',18],['경기',14],['강원',3],['기타',7]]], { title: '원형 그래프 예제', gridPadding: { top: 25, bottom: 38, left: 0, right: 0 }, seriesDefaults: { renderer: $.jqplot.PieRenderer, rende.. 2026. 6. 25.
jqPlot 버블 차트 — BubbleRenderer 완전 정리 Web Development · jQuery + jqPlotjqPlot 버블 차트 —BubbleRenderer 완전 정리x · y 위치 + 크기 + 라벨, 4차원 데이터 한눈에시작 오늘 분석할 코드버블 차트는 한 점에 4가지 정보를 담는다 — x좌표, y좌표, 원의 크기, 라벨. 한국 도시 7개의 데이터를 한 차트에 다 보여준다.var arr = [ [11, 123, 1236, "수원"], [45, 92, 1067, "인천"], [24, 104, 1176, "서울"], [50, 23, 610, "충청"], [18, 17, 539, "오산"], [7, 89, 864, "부천"], [2, 13, 1026, "동탄"] ]; $.jqplot('chartdiv', [arr], { title: '버블 그래프 예제'.. 2026. 6. 25.
jqPlot 가로 막대 차트 — barDirection, legend, 다중 시리즈 완전 정리 Web Development · jQuery + jqPlotjqPlot 가로 막대 차트 —barDirection · 다중 시리즈 · legend남학생 / 여학생을 학년별로 가로로 비교시작 오늘 분석할 코드bar-chart1과 비교해 3가지가 새로 추가됐다. (1) 두 시리즈를 한 차트에, (2) 막대 방향을 가로로, (3) legend(범례)를 차트 옆에.var s1 = [20, 40, 60, 30]; // 남학생 var s2 = [50, 10, 30, 40]; // 여학생 var ticks = ['1학년', '2학년', '3학년', '4학년']; $.jqplot('chartdiv', [s1, s2], { title: '막대 그래프 예제2', seriesDefaults: { renderer: $.jqpl.. 2026. 6. 25.
반응형

티스토리툴바