Chart.js 수평선 차트 또는 수정 된 수평 막대 차트

Question

chart.js를 사용하여 현재 날짜와 관련된 이벤트의 타임 라인을 만들려고합니다.

가로 막 대형 차트는 닫았지만 막대의 팁만 표시하려는 경우가 있습니다. 예를 들어 점이 가로형 꺾은 선형 차트 일 가능성이 큽니다.

필자는 필자의 수평 막대 그래프와 함께 수평선 차트의 모형을 보여주었습니다.

chart.js에서도 가능합니까?

Answer 1

당신이 먼저 필요 차트에 대해 편집 할 수있는 모든 정보를 차트가 포함 된 변수에 저장되어있는 것을 알 (보통 myChart라고,하지만 your fiddle에서 my2Bar)합니다.

그래프를 전체적으로 변경하려면 myChart.config.options의 속성을 편집해야합니다.
특정 차트를 변경하려면 myChart.config.data의 속성을 편집해야합니다.

이 경우 특정 차트 (은 가로 막대)를 변경해야합니다. 당신이 당신의 그래프의 로그를 확인하고 config에 매우 깊이 갈이 일어날 경우

---

, 당신은 차트에서 막대가 myChart.config.data.datasets[0]._meta[0].data[ n ]._model ( n 가있는에 저장된 속성을 사용 그려 볼 마지막됩니다 nth 직사각형, 위에서 아래로). 당신이 찾을 수

일부 속성 :

• base 다음 X 위치에 사각형이 시작됩니다 (예를에 대한 귀하의 xAxe에 0)을 그릴 수있다.
• x
: 사각형이 X 위치까지 인출되고있다.
• height : 그려지는 사각형의 높이.
• 등등 ...

이 값을 편집하려면, 당신은 당신의 다른 사각형 (위의 경로에 n)에 루프가 필요합니다.

변수의 config에서는 수동으로 설정할 수 없습니다.이렇게하면 차트가 반응하기 때문에 작동하지 않습니다 (크기가 인 경우 이전 옵션 인을 사용하여 차트가 다시 그려집니다).

---

사용해야하는 것은 Chart.js plugins입니다.

플러그인을 사용하면 그래프를 작성, 업데이트 및 렌더링하는 동안 트리거되는 모든 이벤트를 처리 할 수 ​​있습니다.

그런 다음 beforeRender 이벤트 (가 초기화 후 트리거하지만 도면 전에), 당신은 그들이 그려되는 방법에 영향을 값을 편집하여 다른 사각형 루프에 필요한 :

beforeRender: function(chart) { 
    for (var i = 0; i < chart.config.data.datasets[0]._meta[0].data.length; i++) { 
     // Change both `3` values to change the height & width of the point 
     chart.config.data.datasets[0]._meta[0].data[i]._model["base"] = chart.config.data.datasets[0]._meta[0].data[i]._model["x"] + 3; 
     chart.config.data.datasets[0]._meta[0].data[i]._model["height"] = 3; 
    } 
} 

여기 최종 결과는 a jsFiddle입니다.
불행히도, 나는 사각형 대신 둥근 점을 만들 수 없습니다.

---

업데이트 : 나는 모든 점은 함께 수평 라인 차트 것처럼 보이게하는 연결되어 another jsFiddle을 한

(은 물론 개선 할 수있다 , 그러나 그것은 좋은 출발입니다).