Javascript ChartJS单击工具栏并将其更改为'；背景色

我正在使用chartjs绘制一个简单的条形图。条形图是可点击的，我注意到如果用户点击条形图。现在，我想更改已单击的条的背景，以指示此条处于活动选中状态

这可能吗

Thx

编辑：我添加了一个小示例。 单击的元素将通过以下方式收集：

this.getElementAtEvent（e）

如果您花一些时间玩和您的元素，您会看到如果您

记录

您的元素，您将拥有一个仅包含一个对象（所述元素）的数组

此对象本身有几个子对象，例如

\u index

（您在小提琴中使用的内容）。
这是您应该开始编辑元素背景的地方

如果深入查看

\u图表

子项，最终可以编辑所需的条形图

我更新了你的小提琴以查看结果：。

---

---

请注意，如果退出元素，效果将消失。

对

活动属性进行一点修改，就会得到所需的结果

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

通过修改数组中保存的背景色，我找到了一个非常优雅的解决方案。遗憾的是，render（）还不够，因此我需要更新（）

希望我能用ES6顺便说一下：-）

var backgroundColor=['rgb（124181236）'，
“rgb（124181236）”，
“rgb（124181236）”，
“rgb（124181236）”，
“rgb（124181236）”，
“rgb（124181236）”；
var a=新图表（document.getElementById（“趋势图表”）{
类型：'bar'，
数据：{
标签：[“红色”、“蓝色”、“黄色”、“绿色”、“紫色”、“橙色”]，
数据集：[{
标签：“#投票数”，
数据：[12,19,3,5,2,3]，
背景色：背景色
}]      
},
选项：{
onClick：函数（e）{
var元素=this.getElementAtEvent（e）；
对于（var i=0；iYou可以通过
元素[0]更改元素的背景色）。_chart.config.data.datasets[0]。backgroundColor=“rgb（255255）”
。请注意，这只在您选择第二个之前有效，但您应该能够找到如何将颜色重置为原始颜色。我不知道这样做是否是有意的，但这是我通过您的小提琴所做的。谢谢，但不幸的是，这也会在刷新时为其余的条带颜色，因为这只是一个系列大量数据…：-/Yep现在也看到了。我将检查是否能够让它工作并编辑此帖子。如果将其设置为一个，将每个条悬停在其上方，这也会将每个条涂成红色；）与我的评论中的错误相同。似乎你们都有正确的建议，但要运行此功能，我需要为每个酒吧配置一系列数据…@Christian更新了小提琴，现在告诉我它是如何运行的谢谢，但我想我找到了一个更优雅的解决方案。看看我的答案。这很有效，除了我必须添加“选定”之外在迭代背景色数组时，颜色处于正确的索引，或者在迭代后立即重置。
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
    }
  }
})