728x90
반응형
728x90
반응형
728x90
반응형

꺽은선 그래프(Line Chart)를 그려보고자 한다.

 

주의! d3.js 파일의 버전에 따라 문법이 다른 경우가 많다.

잘 모르는 사람은 웹 서핑으로 공부하기 참으로 어렵다.

그러므로 버전을 잘 확인하도록! 

나는 d3.js vesion 4.5.0 을 사용했다.

 

소스 코드 : https://www.w3schools.com/code/tryit.asp?filename=GBNU8N5FVWAF

 

1. 이 코드를 처음 대충 봤을때 가장 이해가 안 됐던 부분은 x축 가이드의 transform 좌표 였다.

1
2
3
4
5
6
7
8
// x축 가이드 생성
svg.append("g")
    .attr("class", "grid")
    .attr("transform", "translate(0," + chartHeight + ")")
    .call(make_x_gridlines(x)
        .tickSize(-chartHeight)
        .tickFormat("")
    )
 cs

 

transform="translate(0,370)" 인데 아래 이미지를 보면 x좌표가 이상하다?

결론을 말하자면 chrom 개발자모드 에서 아래와 같이 태그 선택시

보여지는 그래프 영역 박스는 실제 좌표와 다소 차이가 있다.

아마도 태그간의 계층을 표시하는것 같다.

 

여기서 x, y축은 <g transform="translate(50,0)"></g> 태그의 영역(분홍색)에

포함되는 듯이 보이지만, 실제로는 포함되지 않는다. 

실제로 분홍색 영역의 g 태그는, 하늘색 영역의 g 태그와 같다. 즉 좌측 x 좌표는 보이는 것과 달리 같게 된다.

 

2. 날짜는 언제나 프로그래밍에서 골치가 아프게한다.

날짜 데이터를 d3에에 맞게 파싱하여 변경한다.

1
2
3
4
5
// dataset의 날짜 파싱을 위한 패턴, 패턴을 이용해 날짜 데이터 변경
var parseTime = d3.timeParse("%Y-%m-%d");
dataset.forEach(function(d) {
    d.DAT = parseTime(d.DAT);
});
 cs

 

 

잊어버리지 않기 위한 몸부림.

분명 잊을테지만 이렇게 적어 놓으면 필요할때 쓸수는 있겠지.

728x90
반응형
저작자표시

'코딩 삽질' 카테고리의 다른 글

[java] ArrayList를 다룰때 흔한 실수  (0) 2020.03.25
[sql, oracle] 계정별 마지막 row  (0) 2020.02.28
[javascript, swiper] tab swiper 셈플소스  (0) 2019.12.19
[html, ajax] bootstrap 파일 업로드 progress bar  (2) 2019.12.17
[java] split에 마침표(dot) 사용하기  (0) 2019.12.11
728x90
반응형

모바일 화면에서 사진 같은 것을 좌우로 밀어서 사진을 바꿔주는 swiper 기능

 

1. html 파일에 swiper css 파일 추가

1
<link rel="stylesheet" href="/js/swiper.min.css">
 cs

2. html 파일에 swiper.js 파일 추가

1
<script type="text/javascript" src="/js/swiper.js"></script>
 cs

3. 탭 html 구성

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<div>
  <ul>
    <li class="tablinks active" id="tab1">Tab1</li>
    <li class="tablinks" id="tab2">Tab2</li>
    <li class="tablinks" id="tab3">Tab3</li>
  </ul>
</div>
<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <div class="swiper-slide-sub">
        <!-- Tab1 내용 -->
        <ul>
          <li>li1</li>
          <li>li2</li>
          <li>li2</li>
        </ul>
      </div>
    </div>
    <div class="swiper-slide">
      <div class="swiper-slide-sub">
        <!-- Tab2 내용 -->
        <ul>
          <li>li1</li>
          <li>li2</li>
          <li>li2</li>
        </ul>
      </div>
    </div>
    <div class="swiper-slide">
      <div class="swiper-slide-sub">
        <!-- Tab3 내용 -->
        <ul>
          <li>li1</li>
          <li>li2</li>
          <li>li2</li>
        </ul>
      </div>
    </div>
  </div>
</div>
 cs

4. javascript 파일에서 swiper 사용설정

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
$(document).ready(function () {
    init();
});
 
function init() {
 
    var swiper = new Swiper('.swiper-container', {
        autoHeight: true,
        on: {
            init: function () {
                $(".swiper-slide").css("background-color", 'transparent');
                $(".swiper-slide").css("text-align", 'left');
            },
            slideChange: function () {
                var slider = this;
                if (swiper.activeIndex == 0) {
                    $('#tab1').addClass('active');
                    $('#tab2').removeClass('active');
                    $('#tab3').removeClass('active');
 
                    document.body.scrollTop = 0; // For Safari
                    document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
 
                } else if (swiper.activeIndex == 1) {
                    $('#tab1').removeClass('active');
                    $('#tab2').addClass('active');
                    $('#tab3').removeClass('active');
 
                    document.body.scrollTop = 0; // For Safari
                    document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
 
                } else if (swiper.activeIndex == 2) {
                    $('#tab1').removeClass('active');
                    $('#tab2').removeClass('active');
                    $('#tab3').addClass('active');
 
                    document.body.scrollTop = 0; // For Safari
                    document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
 
                }
            }
        }
    });
 
    $('#tab1').click(function () {
        swiper.slideTo(0, 300, false);
    });
    $('#tab2').click(function () {
        swiper.slideTo(1, 300, false);
    });
    $('#tab3').click(function () {
        swiper.slideTo(2, 300, false);
    });
 
}
 
 cs

 

공식 사이트 : https://swiperjs.com/

 

Swiper - Most Modern Mobile Touch Slider

Swiper - is the free and most modern mobile touch slider with hardware accelerated transitions and amazing native behavior.

swiperjs.com

 

 

728x90
반응형
저작자표시

'코딩 삽질' 카테고리의 다른 글

[sql, oracle] 계정별 마지막 row  (0) 2020.02.28
[d3] Line chart sample  (0) 2020.02.07
[html, ajax] bootstrap 파일 업로드 progress bar  (2) 2019.12.17
[java] split에 마침표(dot) 사용하기  (0) 2019.12.11
[weblogic] 500 에러  (2) 2019.12.10
728x90
반응형

파일을 서버에 업로드할 때 파일용량으로 프로그레스 바를 표시하려고 한다.

 

 

위와 같은 화면이다.

 

단순한 필요 요소만 언급하면 아래와 같다.

 

1. css 파일 필요 (파일명 : progressBar.css)

1
2
3
.progress { position:relative; width:100%; border: 1px solid #ddd; padding: 1px; border-radius: 3px; }
.bar { background-color: #337ab7; width:0%; height:20px; border-radius: 3px; }
.percent { position:absolute; display:inline-block; top:1px; left:48%; }
 cs

 

2. html 파일에 css 파일 연결

1
<link rel="stylesheet" href="/css/progressBar.css">
 cs

 

3. html 파일에 progress model 추가

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!-- progress Modal -->
<div class="modal fade" id="pleaseWaitDialog" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h3>Upload processing...</h3>
            </div>
            <div class="modal-body">
                <!-- progress , bar, percent를 표시할 div 생성한다. -->
                <div class="progress">
                    <div class="bar"></div>
                    <div class="percent">0%</div>
                </div>
                <div id="status"></div>
            </div>
        </div>
    </div>
</div>
 cs


4. javascript에서 파일 업로드 시 모달 호출 및 프로그레스 진행

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
function insertBoard() {
 
    if (fnValidate()) {
 
        if (confirm("저장하시겠습니까?")){
 
            var formData = new FormData($("#writeFrm")[0]);
 
            /* progressbar 정보 */
            var bar = $('.bar');
            var percent = $('.percent');
            var status = $('#status');
 
            $.ajax({
                xhr: function() {
                    var xhr = new window.XMLHttpRequest();
                    xhr.upload.addEventListener("progress", function(evt) {
                        if (evt.lengthComputable) {
                            var percentComplete = Math.floor((evt.loaded / evt.total) * 100);
 
                            /* Do something with upload progress here */
                            var percentVal = percentComplete + '%';
                            bar.width(percentVal);
                            percent.html(percentVal);
 
                        }
                    }, false);
                    return xhr;
                },
                type : 'POST',
                url : getContextPath() + "/admin/board/insertboard.do",
                dataType: 'text',
                data : formData,
                processData : false,
                contentType : false,
                beforeSend:function(){
                    // progress Modal 열기
                    $("#pleaseWaitDialog").modal('show');
 
                    status.empty();
                    var percentVal = '0%';
                    bar.width(percentVal);
                    percent.html(percentVal);
 
                },
                complete:function(){
                    // progress Modal 닫기
                    $("#pleaseWaitDialog").modal('hide');
 
                },
                error:function(request,status,error){
                    alert("code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error);
                },
                success:function(result, status) {
 
                    alert("저장 되었습니다.");
                    location.href = getContextPath() + "/admin/board/boardList.do?";
                }
            });
 
        } else {
            return;
        }
    } else {
        return;
    }
}
 cs

필수적인 요소는 4군데

 1) /* progressbar 정보 */ 아래의 3줄

 2) $.ajax의 xhr: function() {

 3) $.ajax의 beforeSend:function(){

 4) $.ajax의 complete:function(){

 

5. spring의 Controller에서 받을때

1
2
3
4
@PostMapping(value = "/insertBoard")
public RestResponse<BoardResDTO> insertItem(MultipartHttpServletRequest request, @ModelAttribute BoardReqDTO req) throws Exception {
    return new RestResponse<>(serviceClass.insertItem(request, req));
}
 cs

여기서 파일받기 위해 필요한 부분은 MultipartHttpServletRequest  입니다.

 

 

 

프로그레스바의 색상등을 변경하고자 한다면 아래 URL 정보를 참조

https://getbootstrap.com/docs/4.4/components/progress/

 

 

관련글

1. [spring] java.io.IOException: java.io.FileNotFoundException, multipartfile.transferto(file)

 

 

728x90
반응형
저작자표시

'코딩 삽질' 카테고리의 다른 글

[d3] Line chart sample  (0) 2020.02.07
[javascript, swiper] tab swiper 셈플소스  (0) 2019.12.19
[java] split에 마침표(dot) 사용하기  (0) 2019.12.11
[weblogic] 500 에러  (2) 2019.12.10
[html] include 절대경로, 상대경로  (0) 2019.11.24
728x90
반응형
1
2
String str = "abcd.1234";
String[] arrStr = str.split(".");
 cs

이 경우 나눠지지 않음.

 

 

1
2
String str = "abcd.1234";
String[] arrStr = str.split("\\.");
 cs

이렇게 해야지 배열에 2개의 string으로 나눠짐.

728x90
반응형
저작자표시

'코딩 삽질' 카테고리의 다른 글

[javascript, swiper] tab swiper 셈플소스  (0) 2019.12.19
[html, ajax] bootstrap 파일 업로드 progress bar  (2) 2019.12.17
[weblogic] 500 에러  (2) 2019.12.10
[html] include 절대경로, 상대경로  (0) 2019.11.24
[html, asp] 게시글이 한줄로 나오는 것 수정  (0) 2019.11.24
728x90
반응형

Whitelabel Error Page 

This application has no explicit mapping for /error, so you are seeing this as a fallback.

Tue Dec 10 18:57:02 KST 2019

There was an unexpected error (type=Internal Server Error, status=500).

Error resolving template "/contents/sapLIst", template might not exist or might not be accessible by any of the configured Template Resolvers

 

 

환경

weblogic 12.2.1.3.0

spring boot 2.0.4.RELEASE

 

현상

로컬에서 실행했을 때는 문제가 없지만 weblogic에서는 페이지 에러가 난다.

 

결론

html 파일명이 sapList 인데 sapLIst로 대문자로 썼다고 weblogic이 못찾은 것.

 

728x90
반응형
저작자표시

'코딩 삽질' 카테고리의 다른 글

[html, ajax] bootstrap 파일 업로드 progress bar  (2) 2019.12.17
[java] split에 마침표(dot) 사용하기  (0) 2019.12.11
[html] include 절대경로, 상대경로  (0) 2019.11.24
[html, asp] 게시글이 한줄로 나오는 것 수정  (0) 2019.11.24
[asp] write error log at text file  (0) 2019.11.24
728x90
반응형
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!-- ASP 코드의 include -->
<!-- 상대경로 -->
<!--#include file="/second.html"-->
<!-- 절대경로-->
<!--#include virtual="/main/second.html"-->
 
<!-- PHP 코드의 include -->
<?
    include_once $_SERVER["DOCUMENT_ROOT"].'/main/second.html';
?>
 
<!-- javascript 코드의 include -->
<script>
    // 상대주소
    document.location.href="second.html";
    // 절대주소
    document.location.href="../main/second.html";
</script>
 
<!-- HTML 코드의 include -->
<!-- 절대주소 -->
<link rel="stylesheet" href="../main/second.html">
cs
728x90
반응형
저작자표시

'코딩 삽질' 카테고리의 다른 글

[java] split에 마침표(dot) 사용하기  (0) 2019.12.11
[weblogic] 500 에러  (2) 2019.12.10
[html, asp] 게시글이 한줄로 나오는 것 수정  (0) 2019.11.24
[asp] write error log at text file  (0) 2019.11.24
[java] java.lang.NumberFormatException  (0) 2019.11.17
728x90
반응형

용도 : DB 테이블 상에 엔터가 입력되어 있지만 html에서 한줄로 나오는 문제

 

# 수정 전

1
<td> <%= contents%> </td>
 cs

 

# 수정 후

1
<td> <%= Replace(contents, Chr(13)&Chr(10),"<br>") %> </td>
 cs

DB 테이블 상의 엔터값을 태그 <br>로 변경

 

 

728x90
반응형
저작자표시

'코딩 삽질' 카테고리의 다른 글

[weblogic] 500 에러  (2) 2019.12.10
[html] include 절대경로, 상대경로  (0) 2019.11.24
[asp] write error log at text file  (0) 2019.11.24
[java] java.lang.NumberFormatException  (0) 2019.11.17
[oracle] GRANT (권한)  (0) 2019.11.17
728x90
반응형

1. asp code

1
2
3
4
5
6
7
8
9
10
11
12
13
<%
' text 파일 
Function makeText(str)
    Dim fs, f
    Set fs = Server.CreateObject("Scripting.FileSystemObject")
    Set f = fs.CreateTextFile("C:\log\log.txt", true)
    f.write(request.servervariables("HTTP_url") &" : "& str &" ")
    f.close
    Set f=Nothing
    Set fs =Nothing
End Function
%>
 
 cs

makeText(str)의 str로 받은 스트링을 "C:\log\log.txt" 에 기록한다.

 

* 추가 : 브라우저에 쓰기

1
2
3
4
<%
' 브라우저에 스트링 쓰기 쓰기
Response.Write(str)
%>
 cs

 

2. 오류 남기기 (무시하고 기록하기)

1
2
3
4
5
6
7
8
9
10
11
12
<%
    On Error Resume next '아래 부터는 오류를 무시한다.
 
    Dim arrTest(3)
    arrTest(5) = 3 '이 부분에서 런타임 오류 발생
 
    If Err.number <> 0 Then '오류 발생시
        makeText("오류를 일으키는 객체 : "&Err.source& " /  오류번호 : "&Err.number&" / 오류설명 : "&Err.Description)
    Else
        makeText("정상 실행")
    End if
%>
 cs

* 추가: Error 컬렉션의 속성

속성 의미 
 Number 오류번호 
 NativeError 오류번호에 대한 설명 
 Description 오류에 대한 설명 
 Source 오류를 발생시키는 객체 
 SQLState SQL 오류 번호 

 

오류번호
5 - 프로시저 호출 또는 인수가 잘못되었습니다. 
6 - 숫자가 너무 큽니다. 
7 - 메모리가 부족합니다. 
9 - 첨자 사용이 잘못되었습니다. 
10 - 배열이 고정되었거나 일시적으로 잠금 상태입니다. 
11 - 0으로 나누었습니다. 
13 - 형식이 일치하지 않습니다. 
14 - 문자열 공간이 부족합니다. 
17 - 요청한 작업을 수행할 수 없습니다. 
28 - 스택 공간이 부족합니다. 
35 - Sub 또는 Function이 정의되지 않았습니다. 
48 - DLL 로드 중 오류가 발생하였습니다. 
51 - 내부 오류입니다. 
52 - 파일 이름 또는 번호가 잘못되었습니다. 
53 - 파일이 없습니다. 
54 - 파일 모드가 잘못되었습니다. 
55 - 파일이 이미 열려 있습니다. 
57 - 장치 입/출력 오류입니다. 
58 - 파일이 이미 존재합니다. 
61 - 디스크에 여유 공간이 없습니다. 
62 - 파일 끝을 넘는 입력(값)입니다. 
67 - 파일이 너무 많습니다. 
68 - 사용할 수 없는 장치입니다. 
70 - 사용 권한이 없습니다. 
71 - 디스크가 준비되지 않았습니다. 
74 - 다른 드라이브로 이름을 바꿀 수 없습니다. 
75 - 경로/파일 액세스 오류입니다. 
76 - 경로를 찾을 수 없습니다. 
91 - Object 변수가 설정되어 있지 않습니다. 
92 - For 루프를 초기화하지 않았습니다. 
94 - Null의 사용이 잘못되었습니다. 
322 - 필요한 임시 파일을 만들 수 없습니다. 
424 - 개체가 필요합니다. 
429 - ActiveX 구성 요소는 개체를 만들 수 없습니다. 
430 - 클래스가 자동화를 지원하지 않습니다. 
432 - 자동화 실행 중 파일 이름이나 클래스 이름을 찾을 수 없습니다. 
438 - 개체가 이 속성 또는 메서드를 지원하지 않습니다. 
440 - 자동화 오류가 발생하였습니다. 
445 - 개체가 이 동작을 지원하지 않습니다. 
446 - 개체가 명명된 인수를 지원하지 않습니다. 
447 - 개체가 현재의 로케일 설정을 지원하지 않습니다. 
448 - 명명된 인수를 찾을 수 없습니다. 
449 - 선택적인 인수가 아닙니다. 
450 - 인수의 개수나 속성 지정이 잘못되었습니다. 
451 - 컬렉션이 아닌 개체입니다. 
453 - 지정한 DLL 함수를 찾을 수 없습니다. 
455 - 코드 자원 잠금시 오류가 발생하였습니다. 
458 - 변수가 VBScript에서 지원하지 않는 자동화 형식을 사용하고 있습니다. 
462 - 원격 서버 시스템이 없거나 사용할 수 없습니다. 
481 - 그림이 잘못되었습니다. 
500 - 변수가 정의되지 않았습니다. 
501 - 지정이 잘못되었습니다. 
502 - 개체를 스크립트하는 데 잘못되었습니다. 
503 - 개체를 초기화하는 데 잘못되었습니다. 
504 - 개체를 만드는 데 잘못되었습니다. 
505 - 잘못되거나 해당되지 않는 참조입니다. 
506 - 클래스가 정의되지 않았습니다. 
507 - 예외가 발생하였습니다. 
5016 - 정규식 개체가 필요합니다. 
5017 - 정규식에 구문 오류가 있습니다. 
5018 - 예기치 않은 한정 기호입니다. 
5019 - 정규식에 ']'가 필요합니다. 
5020 - 정규식에 ')'가 필요합니다. 
5021 - 문자 집합의 범위가 틀립니다. 
32811 - 요소가 없습니다.

 

 

 

출처 : http://murdering.tistory.com/117 [웹프로그래머]

 

 

728x90
반응형
저작자표시

'코딩 삽질' 카테고리의 다른 글

[html] include 절대경로, 상대경로  (0) 2019.11.24
[html, asp] 게시글이 한줄로 나오는 것 수정  (0) 2019.11.24
[java] java.lang.NumberFormatException  (0) 2019.11.17
[oracle] GRANT (권한)  (0) 2019.11.17
[oracle] link db  (0) 2019.11.17

+ Recent posts

티스토리툴바