이게 뭐야

이번에는 Chart.js를 v2로 마이그레이션했습니다.
그때까지는 Chart.js의 선 그래프에 선택 기능 추가 - Qiita 적어 둡니다.

※2016/06/29 시점에서의 최신판이 되는 v2.1.6으로 이행해, 그 Chart.js를 대상으로 하여 각 수정을 실시하고 있습니다.

수정 부분

간단히 Chart.js를 직접 만지면 부분만 보여줍니다.
repository를 clone하고 수정하고 build ~ 라든지는 기호로 부디.

기본값 추가

기본적으로 이번에 추가할 강조 표시 기능을 사용하지 않도록 설정합니다.

Chart.js

@@ -6564,6 +6564,9 @@ module.exports = function(Chart) {
        tickMarkLength: 10,
        zeroLineWidth: 1,
        zeroLineColor: "rgba(0,0,0,0.25)",
+       highlightVerticalLine: false, // 強調表示を行うか否かのフラグ
+       highlightLineColor: "rgba(255,0,102,1)", // 強調表示時の線の色
+       highlightLineWidth: 2, // 強調表示時の線の太さ
        offsetGridLines: false
      },

기능을 유효하게 할 때는 new Chart()시 options에 적절히 파라미터를 건네줍니다.

options: {
  ...
  scales: {
    xAxes: [{
      gridLines: {
        highlightVerticalLine: true
      }
    }]
  },
  ...
}

축의 label이 많은 경우 skip되어 버리므로 대처

이후 2개는 묘화 대상이 되는 item을 루프로가---와 조립하고 있는 근처에 편집을 실시합니다.

Chart.js는 어색하고 너무 축 항목 수가 많으면 skip 해 버립니다.
빠짐없이 강조 표시하고 싶은 grid선까지 skip 버리므로, 묘화 대상이 되도록 조건을 만지십시오.

Chart.js

@@ -7111,9 +7114,10 @@ module.exports = function(Chart) {

          var isLastTick = me.ticks.length === index + 1;

+         var isHighlightTick = gridLines.highlightVerticalLine && index === me.highlightIndex;
          // Since we always show the last tick,we need may need to hide the last shown one before
          var shouldSkip = (skipRatio > 1 && index % skipRatio > 0) || (index % skipRatio === 0 && index + skipRatio >= me.ticks.length);
-         if (shouldSkip && !isLastTick || (label === undefined || label === null)) {
+         if (shouldSkip && !isLastTick && !isHighlightTick || (label === undefined || label === null)) {
            return;
          }

강조 표시

강조 표시 grid 선의 색상과 두께를 지정합니다.
Chart.js적으로는 skip 대상이 되는 grid선의 경우(shouldSkip가 treue의 경우), 원래는 묘화되어 있지 않은 label가 강조 표시시만 튀어 나와서 멋지기 때문에, label에 공문자를 대입하고 있습니다.

Chart.js

@@ -7122,7 +7126,13 @@ module.exports = function(Chart) {
            // Draw the first index specially
            lineWidth = gridLines.zeroLineWidth;
            lineColor = gridLines.zeroLineColor;
-         } else  {
+         } else if (isHighlightTick) {
+           if (shouldSkip) {
+             label = '';
+           }
+           lineWidth = gridLines.highlightLineWidth;
+           lineColor = gridLines.highlightLineColor;
+         } else {
            lineWidth = helpers.getValueAtIndexOrDefault(gridLines.lineWidth, index);
            lineColor = helpers.getValueAtIndexOrDefault(gridLines.color, index);
          }

샘플

Chart.js/samples/line.html에서 예제를 보여줍니다.

강조 표시 기능이 유효하게 되는 것과 같은 플래그를 건네준다.

색상과 두께를 변경하려면 highlightVerticalLine과 같은 깊이로 적절하게 설정하십시오.

line.html

@@ -99,6 +99,9 @@
                         scaleLabel: {
                             display: true,
                             labelString: 'Month'
+                        },
+                        gridLines: {
+                          highlightVerticalLine: true
                         }
                     }],
                     yAxes: [{

리스너 설정 - mouseover&onclick

line.html

@@ -127,6 +130,32 @@
         window.onload = function() {
             var ctx = document.getElementById("canvas").getContext("2d");
             window.myLine = new Chart(ctx, config);
+
+            var chartElm = document.getElementById("canvas");
+
+            // point上ではクリックできる風にcursor = 'pointer';
+            chartElm.onmousemove = function(evt) {
+              if (window.myLine.getElementsAtEvent(evt).length > 0) {
+                chartElm.style.cursor = 'pointer';
+              } else {
+                chartElm.style.cursor = 'default';
+              }
+            }
+
+            chartElm.onclick = function(evt) {
+              console.log(evt);
+              // クリックした要素達を取得
+              var activePoints = window.myLine.getElementsAtEvent(evt);
+
+              // なければ撤退
+              if(activePoints.length <= 0) {
+                return;
+              }
+
+              // hilightIndexに渡して縦線を引く
+              window.myLine.scales['x-axis-0'].highlightIndex = activePoints[0]._index;
+              // update()忘れず
+              window.myLine.update();
+            }
         };

         $('#randomizeData').click(function() {

이렇게

수고하셨습니다.
아직도 js 힘 약하기 때문에 마사카리 먹고 싶어, 잘 부탁드립니다.

참고

Chart.js의 선 그래프에 선택 기능 추가 - Qiita

Chart.js v2에서 클릭 이벤트를 처리하는 방법 - Qiita