DEVELOPPO

https://developers.facebook.com/tools/debug/

https://developers.kakao.com/tool/clear/og

여기 들어가서 주소쓰고 삭제해줘야됌

https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=cab618&logNo=221056317474 

<script type="text/javascript" src="chart.bundle.js"></script>
<div id="container" style="border: solid 1px black; width: 100%; 
height: 300px; margin-bottom: 10px;">
        <canvas id="canvas" style="margin-left: 5px;"></canvas>
    </div>

    <script type="text/javascript">
        var ChartHelper = {
            chartColors: {
                red: 'rgb(255, 99, 132)'
                , orange: 'rgb(255, 159, 64)'
                , yellow: 'rgb(255, 205, 86)'
                , green: 'rgb(75, 192, 192)'
                , blue: 'rgb(54, 162, 235)'
                , purple: 'rgb(153, 102, 255)'
                , grey: 'rgb(201, 203, 207)'
            }
        };

        var color = Chart.helpers.color;

        var data1 = null;
        var data2 = null;
        var barChartData = null;

        // todo: data setting
        data1 = ['10', '20', '30', '40', '50', '60', '70', '80'
, '90', '100', '110', '120'];
        data2 = ['120', '110', '100', '90', '80', '70', '60', '50'
, '40', '30', '20', '10'];

        barChartData = {
            labels: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월'
, '9월', '10월', '11월', '12월']
            , datasets: [
                {
                    label: 'DataSet1'
                    , backgroundColor: 
color(ChartHelper.chartColors.blue).alpha(0.5).rgbString()
                    , borderColor: ChartHelper.chartColors.blue
                    , borderWidth: 1
                    , data: data2
                }
                , {
                    label: 'DataSet2'
                    , backgroundColor: 
color(ChartHelper.chartColors.red).alpha(0.5).rgbString()
                    , borderColor: ChartHelper.chartColors.red
                    , borderWidth: 1
                    , data: data1
                }
            ]
        };

        var ctx = document.getElementById('canvas').getContext('2d');

        window.BarChart = new Chart(ctx, {
            type: 'bar'
// 옆으로 누운 bar 차트를 쓰실 경우 바꾸시면 됩니다.
            //type: 'horizontalBar'
            , data: barChartData
            , options: {
// responsive, maintainAspectRatio의 설정이 아래와 같이 해야
// 브라우저의 크기를 변경해도 canvas를 감싸고 있는
// div의 크기에 따라 차트가 깨지지 않고 이쁘게 출력 됩니다. 
                responsive: true   //auto size : true
                , maintainAspectRatio: false
                , legend: {
                    position: 'top'
                }
                , title: {
                    display: true
                    , text: 'Chart Title'
                }
// Bar 하나에 데이터 모두 보여줄 경우 사용
// 주석 처리 할 경우 이 예제에서는 data1, data2 각각 bar가 2개씩 나옵니다.
                //, scales: {
                //    xAxes: [
                //        { stacked: true }
                //    ]
                //    , yAxes: [
                //        { stacked: true }
                //    ]
                //}

// or bar chart 하나씩 보여줄 경우
                  , scales: {
                        yAxes: [{
                            ticks: {
// Y 축 0부터 시작
                                beginAtZero:true
// Y 축 정수로 보여주기 
// 숫자가 작거나 또는 0인 경우 등 자동으로 보여주므로 소숫점으로 나타난다
                                , callback: function (value) {
                                    if (0 === value % 1) {
                                        return value;
                                    }
                                }
                            }
                        }]
                    }
// 아래 주석 처리하여도 포인터를 바에 가져가면 수치가 나옵니다.
// 그러나 min 버젼을 link할 경우 영역에다 가져가면 나오질 않아요
// 또한 툴팁에 해당 데이터의 색도 나오지 않습니다.
// 직접 코딩 후 min 버젼으로 교체하여 테스트 해보시면 차이를 알 수 있습니다.
                // Tooltip 
                //, tooltips: {
                //    mode: 'index',
                //    intersect: false,
                //},
                //hover: {
                //    mode: 'nearest',
                //    intersect: true
                //}
            }
        });

        var colorNames = Object.keys(ChartHelper.chartColors);
    </script>

chartjs - ticks 데이터 없을시 1-0으로나오게하기..

 public String newsExecute(HttpServletRequest request, @Valid Table1 table1, BindingResult error) throws BindException {

        if(table1.getThumbnailFile().getSize()==0){
            error.addError(new ObjectError("thumnailPhoto","썸네일 사진이 없습니다."));
            throw new BindException(error);
            // ValidationUtils.rejectIfEmpty(error,"thumanailPhoto","MSG00001");
        }

윗대가리 부분만 잘라옴..

회사 코드라 조금 수정....

exception e안에 BindingResult가 원하는 형식으로 안들어가서(??) 이리저리.. 암튼메모..

https://csslab.tistory.com/67

function nodeToString ( node ) {
   var tmpNode = document.createElement( "div" );
   tmpNode.appendChild( node.cloneNode( true ) );
   var str = tmpNode.innerHTML;
   tmpNode = node = null; // prevent memory leaks in IE
   return str;
}

.idea 의 workspace.xml안에 propertiesComponent를 찾아서 추가

 <property name="dynamic.classpath" value="true" />

(-_-) 별안간 에러

javax.mail.MessagingException: Could not convert socket to TLS;
  nested exception is:
   javax.net.ssl.SSLHandshakeException: No appropriate protocol (protocol is disabled or cipher suites are inappropriate)
   at com.sun.mail.smtp.SMTPTransport.startTLS(SMTPTransport.java:1907)
   at com.sun.mail.smtp.SMTPTransport.protocolConnect(SMTPTransport.java:666)
   at javax.mail.Service.connect(Service.java:317)
   at javax.mail.Service.connect(Service.java:176)
   at javax.mail.Service.connect(Service.java:125)
   at javax.mail.Transport.send0(Transport.java:194)
   at javax.mail.Transport.send(Transport.java:124)

하 이거때문에 회사에서 이틀 날렸다~

그냥 자바 버전 낮추니까 됌

그 전까지는 인텔리제이꺼쓰다가 뭐하느라 새로설치했더니..이런

1.8.291에서 1.8.261로 새로 하니까 됨..^^..휴

		tooltips: {

			mode: 'label',
			itemSort: function(a, b) {
				return b.datasetIndex - a.datasetIndex
			},

			}

dataset에서 pointStyle을 설정해준다. 

종류는 이렇게 있음

• 'circle'
• 'cross'
• 'crossRot'
• 'dash'
• 'line'
• 'rect'
• 'rectRounded'
• 'rectRot'
• 'star'
• 'triangle'

options - lengend에서 수정 usepointStyle = true 

결과물

참고 코드

stackoverflow.com/questions/46439315/change-chartjs-legend-icon-style

var data = {
   labels: ['Value [mm]', ''],
   datasets: [{
      label: "Hi-Hi Limit",
      type: 'line',
      data: [5432, 5432],
      backgroundColor: 'rgba(250, 255, 255, 0)',
      borderColor: 'rgba(255, 4, 0, 100)',
      borderWidth: 3,
      radius: 0,
      pointStyle: 'line'
   }, {
      label: "Hi Limit",
      type: 'line',
      data: [5130, 5130],
      backgroundColor: 'rgba(250, 255, 255, 0)',
      borderColor: 'rgba(250, 255, 0, 100)',
      borderWidth: 3,
      radius: 0,
      pointStyle: 'line'
   }, {
      label: "Lo Limit",
      type: 'line',
      data: [905, 905],
      backgroundColor: 'rgba(250, 255, 255, 0)',
      borderColor: 'rgba(250, 255, 0, 100)',
      borderWidth: 3,
      radius: 0,
      pointStyle: 'line'
   }, {
      label: "Lo-Lo Limit",
      type: 'line',
      data: [604, 604],
      backgroundColor: 'rgba(250, 255, 255, 0)',
      borderColor: 'rgba(255, 4, 0, 100)',
      borderWidth: 3,
      radius: 0,
      pointStyle: 'line'
   }, {
      type: 'line',
      label: "Level",
      data: [4800, 4800],
      backgroundColor: 'rgba(0, 119, 220, 1)',
      borderColor: 'rgba(0, 119, 220, 1)',
      borderWidth: 1,
      radius: 0,
      pointStyle: 'rect'
   }],

};

var options = {
   legend: {
      position: 'right',
      labels: {
         usePointStyle: true
      }
   },
   scales: {
      yAxes: [{
         gridLines: {
            display: true,
            color: "rgba(255,99,132,0.2)"
         }
      }],
      xAxes: [{
         gridLines: {
            display: false
         }
      }]
   }
};

Chart.Bar('chart', {
   options: options,
   data: data
});
body {
   background: #1D1F20;
   padding: 16px;
}

.chart-container {
   position: relative;
   margin: auto;
   height: 80vh;
   width: 80vw;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<div class="chart-container">
   <canvas id="chart"></canvas>
</div>