ChartJS가 막대를 클릭하고 배경색을 변경합니다.

Question

저는 chartjs를 사용하여 간단한 막 대형 차트를 그립니다. 막 대형 차트는 클릭 할 수 있으며 사용자가 막 대형을 클릭하면 알 수 있습니다. 이제이 막대가 활발히 선택되었음을 나타 내기 위해 클릭 한 막대의 배경을 변경하고 싶습니다.

이것이 가능합니까?

Thx

편집 : 작은 예제를 추가했습니다. https://jsfiddle.net/10n39cLz/1/ 클릭 된 요소를 사용하여 수집됩니다 : 당신이 이 console과 요소와 재생 시간을 보낼 경우 this.getElementAtEvent(e)

Answer 1

배열 내에 저장된 backgroundColor를 수정하여 매우 세련된 해결책을 발견했습니다. 슬프게도 충분히()되지 않은 렌더링, 그 때문에 나는 업데이 트를() 할 필요가 ...

소원 나는 :-)

var backgroundColor = ['rgb(124, 181, 236)', 
    'rgb(124, 181, 236)', 
    'rgb(124, 181, 236)', 
    'rgb(124, 181, 236)', 
    'rgb(124, 181, 236)', 
    'rgb(124, 181, 236)']; 

var a = new Chart(document.getElementById("trendChart"), { 
    type: 'bar', 
    data: { 
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], 
    datasets: [{ 
     label: '# of Votes', 
     data: [12, 19, 3, 5, 2, 3], 
     backgroundColor: backgroundColor 
    }]  
    }, 
    options:{ 
    onClick: function(e){ 
    var element = this.getElementAtEvent(e); 
      for(var i=0;i<backgroundColor.length;i++){ 
     backgroundColor[i] = 'rgb(124, 181, 236)'; 
    } 
     backgroundColor[element[0]._index] = 'red'; 
     this.update() 
    }, 
      scales: { 
     yAxes: [{ 
      ticks: { 
      fontColor:'#fff' 
      } 
     }], 
        xAxes: [{ 
      ticks: { 
      fontColor:'#fff' 
      } 
     }],      
    }, 
    legend:{ 
     display:false 
    } 
    } 
}) 

Answer 2

, 당신은 당신이 경우 log 당신의 요소, 당신은 (하나 개의 객체 배열을 가지고 것을 볼 상기 요소).

이 개체는 그 자체로 여러 개의 자식이 있습니다 (예 : _index).
여기에서 요소 배경을 편집해야합니다.

_chart 자식의 내부 깊숙이 들어가면 마침내 원하는 바를 편집 할 수 있습니다.

결과를보기 위해 피들을 업데이트했습니다 : here it is.

---

요소 밖에서 mouseleave 인 경우 효과가 사라집니다.

Answer 3

active 속성을 약간 수정하면 원하는 결과를 얻을 수 있습니다.

new Chart(document.getElementById("trendChart"), { 
    type: 'bar', 
    data: { 
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], 
    datasets: [{ 
     label: '# of Votes', 
     data: [12, 19, 3, 5, 2, 3], 
     backgroundColor: 'rgb(124, 181, 236)' 
    }]  
    }, 
    options:{ 
    onClick: function(e){ 
    var element = this.getElementAtEvent(e); 

    // changes only the color of the active object 
    this.active[0]._chart.config.data.datasets[0].backgroundColor = "red"; 

    if(element.length > 0){ 
      alert("Clicked on a bar with index: "+element[0]._index+". Now this bar should be marked as active."); 
     } 
    }, 
      scales: { 
     yAxes: [{ 
      ticks: { 
      fontColor:'#fff' 
      } 
     }], 
        xAxes: [{ 
      ticks: { 
      fontColor:'#fff' 
      } 
     }],      
    }, 
    legend:{ 
     display:false 
    } 
    } 
});