javascript - ChartJS 单击栏并更改其背景颜色

Question

我正在使用 chartjs 绘制一个简单的条形图。条形图是可点击的，我会注意到用户是否点击了条形图。现在我想更改已单击的栏的背景以指示该栏被主动选择。

这可能吗？

谢谢

编辑:我添加了一个小例子。 https://jsfiddle.net/10n39cLz/1/ 单击的元素将使用以下方法收集:this.getElementAtEvent(e)

Answer 1

我找到了一个非常优雅的解决方案，只需修改保存在数组中的 backgroundColor。遗憾的是 render() 还不够，因此我需要做一个 update()..

希望我能顺便使用 ES6 :-)

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
    }
  }
})