본문 바로가기

퍼블리싱/highchart

(12)

label이 있는 gauage차트 highchart guage chart with label See the Pen highchart guage chart with label by publisher.kim (@publisherkim) on CodePen. * 하이차트 전역 옵션 먼저 적용됨 (https://umings.github.io/file/highchart_common.js) Highcharts.chart('chart', { chart: { type: 'gauge', plotBackgroundColor: null, plotBackgroundImage: null, plotBorderWidth: 0, plotShadow: false, }, pane: { startAngle: -90, endAngle: 89.9, background: null, center: ['50%', '90%'], size:..

5단계 gauage chart highchart 5steps guage chart See the Pen highchart 5steps guage chart by publisher.kim (@publisherkim) on CodePen. * 하이차트 전역 옵션 먼저 적용됨 (https://umings.github.io/file/highchart_common.js) Highcharts.chart('chart', { chart: { type: 'gauge', plotBackgroundColor: null, plotBackgroundImage: null, plotBorderWidth: 0, plotShadow: false, }, pane: { startAngle: -90, endAngle: 89.9, background: null, center: ['50%', '90%'], size: '15..

series 팁 (차트 hover액션 false / legend와 차트 영역에서 숨기기) series: [{ name: '데이터1', data: [100, 70], enableMouseTracking: false, // 차트에 mouseover 액션 false }, { name: '데이터2', data: [50, 20], // 데이터 값 설정 visible: false, // 초기에 차트영역에서 숨김 "showInLegend": false, // legend에서 보이지 않게 숨김 }]

간단한 multi yAxis 차트 highchart dual + multi yAxis chart See the Pen highchart simple dual chart by publisher.kim (@publisherkim) on CodePen. * 하이차트 전역 옵션 먼저 적용됨 (https://umings.github.io/file/highchart_common.js) Highcharts.chart('chart', { xAxis: { categories: ['카테고리1', '카테고리2', '카테고리3'], }, yAxis: [{ title: { text: '시리즈1 y축' }, labels: { format: '{value}개' // y축 format 설정 }, }, { title: { text: '시리즈2 y축' }, labels: { format: '{value}원' // y축 format..

비교 차트 highchart compare chart See the Pen highchart compare chart by publisher.kim (@publisherkim) on CodePen. * 하이차트 전역 옵션 먼저 적용됨 (https://umings.github.io/file/highchart_common.js) , jquery 필요 //chart Highcharts.chart('chart', { chart: { type: 'column', marginTop: 30, marginBottom: 80, }, title: null, subtitle: null, xAxis: { categories: ['before', 'after', ], plotBands: [{ from: 0, // Start of the plot band to: 1, // End ..

일주일간 15분 단위로 데이터 넣기 highchart 1week data (every 15 minutes) 챗지피티랑 스무번은 넘게 대화하면서 겨우 겨우 만든 소스 See the Pen highchart 1week data (evety 15 minutes) by publisher.kim (@publisherkim) on CodePen. * 하이차트 전역 옵션 먼저 적용됨 (https://umings.github.io/file/highchart_common.js) // x축 카테고리, 데이터 생성 var data = []; var dayLabels = ["월요일", "화요일", "수요일", "목요일", "금요일", "토요일", "일요일"]; for (var day = 0; day < 7; day++) { for (var hour = 0; hour < 24; hour++) { for (var minute = 0;..

legend에서 특정 item의 click이 안되게 할때 옵션 series: [{ name: '시리즈1', data: [1,2,3] }, { name: '시리즈2 (legend클릭안됨)', data: [1,2,3], events: { legendItemClick: function() { return false; } } }]

y축에 가로로 선 그리기 (plotLines) highchart yAxis line (plotLines) 보통 평균값, 기준값 등 나타낼때 쓰는듯. See the Pen highchart yAxis line (plotLines) by publisher.kim (@publisherkim) on CodePen. * 하이차트 전역 옵션 먼저 적용됨 (https://umings.github.io/file/highchart_common.js) //chart Highcharts.chart('chart', { xAxis: { categories: ["'22.09", "'22.10", "'22.11", "'22.12", "'23.01", "'23.02", "'23.03", "'23.04", "'23.05", "'23.06", "'23.07", "'23.08"], labels: { y: 20, }, }, yAxis: { p..

tooltip의 poinformat을 수정해야 할 때 poinformatter를 사용하면 표출되는 형식을 바꿀수 있는데, 이럴때 기존 formatter 앞에 나오는 동그란 모양의 심볼(?) - 즉 해당 데이터가 어떤 시리즈인지 표시하는 색깔있는 원을 꼭 넣어주고 싶은 경우, 아래 소스 참고. tooltip: { pointFormatter: function() { return '● ' + this.series.name + ': ' + this.y + ' '; }, shared: true, useHTML: true, }, + 필요한경우, point formater 아래에 footer format을 이용해 poinformatter를 수정하지 않고 토탈 값 등 추가 가능 footerFormat: 'Total: {point.total} ',

자주 쓰는 차트 전역 옵션 내가 자주 사용하는 차트 전역 옵션 (https://umings.github.io/file/highchart_common.js) Highcharts.setOptions({ lang: { thousandsSep: ',' }, chart: { backgroundColor: 'transparent', // 차트 background 컬러 style: { fontFamily: 'pretendard' // 차트 전체 font family 적용 } }, navigation: false, // 차트 메뉴 버튼 유/무 (필수) credits: { enabled: false }, // 하단 하이차트 주소 숨김 (필수) title: null, // 대제목, 없을 경우 -> title: undefined or null sub..

seriese의 특정 data만 색상 다르게 넣기 highchart series one data color differnt See the Pen highchart series one data color differnt by publisher.kim (@publisherkim) on CodePen. * 하이차트 전역 옵션 먼저 적용됨 (https://umings.github.io/file/highchart_common.js) Highcharts.chart('chart', { xAxis: { categories: ["'22.09", "'22.10", "'22.11", "'22.12", "'23.01", "'23.02", "'23.03", "'23.04", "'23.05", "'23.06", "'23.07", "'23.08"], labels: { y: 20, }, }, series: [{ name: '시리즈', type: 'col..

1초 단위로 데이터가 들어가는 highchart See the Pen 1초 단위로 데이터가 들어가는 highchart by publisher.kim (@publisherkim) on CodePen. html css body{ background: #282d3a; } .chart1{ width: 300px; height: 300px; border: 1px solid; box-sizing: border-box; padding: 10px; } .chart2{ width: 900px; height: 600px; border: 1px solid; box-sizing: border-box; padding: 10px; } .MAT20{ margin-top: 20px; } .highcharts-tooltip-box { fill: black; fill-opacity:..

이전 1 다음

728x90

티스토리툴바