J'code daily

Adding a unit to x axis labels in plotly.js

How to use it sets the tick label suffix plot.ly.

How to change the way numbers are displayed in plot.ly graph. - Plotly

I don't want to use this method in this graph.

So I solved it.

tikformat was used as the solution.

var layout = {

    xaxis : {

    tickformat: '0.0f'

   }

}

모드바에서 특정 버튼 제거 방법

1. Put the mouse on top of icon.
2. You can check which one it is.
3. If it comes out as Compare data on hover, the appropriate hoverCompareCartesian will be the answer.

hoverCompareCartesian :  Compare data on hover

hoverClosestCartesian :  show closest data on hover

toggleSpikelines : toggle spike lines

resetScale2d : reset axes

autoScale2d : autoscale

If there's anything you want to find, do Ctrl + F.

list of all the modebar buttons

• 2D
  - zoom2d, pan2d, select2d, lasso2d, zoomIn2d, zoomOut2d, autoScale2d, resetScale2d
• 3D
  - zoom3d, pan3d, orbitRotation, tableRotation, handleDrag3d, resetCameraDefault3d,
    resetCameraLastSave3d, hoverClosest3d
• Cartesian
  - hoverClosestCartesian, hoverCompareCartesian
• Geo
  - zoomInGeo, zoomOutGeo, resetGeo, hoverClosestGeo
• Other
  - hoverClosestGl2d, hoverClosestPie, toggleHover, resetViews, toImage,
    sendDataToCloud, toggleSpikelines, resetViewMapbox

Plotly.js Chart를 사용하면서 필요하지 않는 도구모음의 경우 제거, 제거 방법은 아래와 같다.

lasso2d : 올가미
select2d : 사각형 선택
displaylogo : plotly 로고 제거

다른 도구모음 추가나 제거의 경우 아래 링크에서 알아 볼 수 있음.

https://github.com/plotly/plotly.js/blob/master/src/components/modebar/buttons.js

Plotly.js의 확대 기능을 이용한 후, 축소 방법은..
- 더블 클릭하면 처음 상태로 돌아온다.

현상 : 출력을 할 경우 아래와 같은 현상 발생

해결 방법 : 1) https://nodejs.org/ko/

             
                2) 여기서 Node.js LTS 버전을 다운 받고, 설치 진행

                3)  VS Code를 재실행 하면 해결

JSON는 무엇인가?
json는 속성:값 또는 키(key):값(value)으로 이루어짐
 - “name” : “jcode”
비동기 브라우저/서버 통신을 위해 대체하는 주요 데이터 포맷
자바스크립트 언어에서 파생
자바 스크립트를 사용하여, 비동기적으로 서버와 통신을 하는 방식

JSON 구조
Number, String, Boolean, Array, Object, null
Number – C와 Java 8진수 16진수 표현한 방법은 지원안됨
String – “”(큰 따옴표)로 묶어야함
Boolean – true와 false
Array – [ ](대괄호)로 나타낸다. ,(쉼표)로 구분
Object – { }(중괄호)로 나타낸다.

장점
1) 텍스트로 이루어져, 사람과 기계 모두 읽고 쓰기 쉬움
2) 프로그래밍 언어와 플랫폼에 독립적, 서로 다른 시스템간 객체 교환 좋다
3) 자바스크립트 문법을 채용하여, eval 명령으로 사용 가능
4) 대부분 최신 웹 브라우저에는 JSON 전용 파서 기능을 내장하고 있다
5) 경량 데이터 교환 형식이기 때문 XML보다 빠르다

단점
1) eval 명령을 사용하면 외부 악성 코드가 유입 될 수 있다
2) 대용량 데이터 송수신에는 부적합

ajax는 무엇인가?
ajax는 Asynchronous JavaScript and XML의 약자
자바 스크립트를 사용하여, 비동기적으로 서버와 통신을 하는 방식

비동기식이란?
- 데이터를 가져오는 동안 다른 일을 할 수 있도록 만들어 줍니다.

동기적이란?
- 비동기와 반대로, 작업이 시작되면 그 작업이 끝날 때 까지 지연이 발생하며 완료가 될 때까지 기다리고 있어야합니다.

장점
1) 페이지 이동 없이 빠르게(깜빡임 없이) 화면 전환 가능
2) 서버 처리 시 기다림 없이, 비동기적으로 사용 가능
3) 수신하는 데이터 양을 줄이고, 클라이언트에게 처리를 부탁 할 수 있음

단점
1) 오페라 7 이하, 익스플로러 4.0 이하 브라우저에서는 사용 불가
2) HTTP 클라이언트 기능이 한정
3) 페이지 이동 없는 통신으로 보안 문제 발생
4) 지원하는 Charset이 한정됨
5) 스크립트로 작성되 디버깅이 어렵고 간단하지 않다.
6) 요청 남발로 서버 부화가 발생 할 수 있다.
7) 동일 출처 정책으로 다른 도메인과 통신이 불가능

알고가기
1) Charset란?
데이터를 부호환 인코딩과 관련되어 있다. 글자가 안깨지 해준다.
 - 각 브라우저(크롬, 사파리, 익스플로우)등 여러 브라우저에서 글자가 정확이 보이게한다.
<meta charset=UTF-8/>
2) 동일 출처 정잭이란?
웹 애플리케이션에서 중요한 보안 모델이다.
어떤 출처에서 불러온 스크립트를 다른 출처에서 불러온 리소스와 상호작용을 제한하는 중요한 보안 방식
즉. 경로는 달라도, 프로토콜, 포트(명시한 경우), 호스트가 모두 동일해야 동일한 출처이다.



참조 사이트
https://ko.wikipedia.org/wiki/Ajax
https://ko.wikipedia.org/wiki/%EB%8F%99%EC%9D%BC-%EC%B6%9C%EC%B2%98_%EC%A0%95%EC%B1%85