ChartJS点击条形图并更改其背景颜色

Question

我正在使用chartjs绘制一个简单的柱状图。柱状图是可点击的，如果用户点击了某个柱子，我注意到它。现在我想改变被点击的柱子的背景颜色，以表示该柱子被选中。

这是可能的吗？

谢谢

编辑：我添加了一个小例子。 https://jsfiddle.net/10n39cLz/1/ 使用此代码可以获取所点击的元素：this.getElementAtEvent(e)

- Christian

---

你可以通过element[0]._chart.config.data.datasets[0].backgroundColor = "rgb(255, 255, 255)";来更改元素的背景颜色。请注意，这仅适用于您选择第二个之前，但是您应该能够找到如何将颜色重置为原始颜色的方法。我不知道是否以这种方式完成是预期的方式，但这是我通过您的fiddle实现的。 - KRONWALLED

谢谢，但不幸的是，这也会在刷新时给其他条形图着色，因为它只是一个数据系列。:-/ - Christian

是的，我现在也看到了。我会检查一下是否能够让它工作并编辑这篇文章。 - KRONWALLED

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

- Christian

---

这个很好，除了我得在迭代背景颜色数组时添加“selected”颜色到正确的索引，否则它会立即被重置。 - Tom John

Answer 2

如果你花些时间在控制台和你的元素上玩耍，你会发现如果你log你的元素，你会得到一个只有一个对象（即所说的元素）的数组。

这个对象本身有几个子元素，比如_index（你在你的fiddle中使用的元素）。这就是你应该开始编辑元素背景的地方。

如果你深入到_chart子元素中，最终你可以编辑你想要的条形图。

我更新了你的fiddle以查看结果：这里。 请注意，如果你从元素mouseleave出去，效果将消失。

- tektiv

---

@Christian 已更新了代码片段，请告诉我现在的情况如何。 - tektiv

谢谢，但我想我找到了更优雅的解决方案。请看我的答案。 - Christian

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

- nashcheez

---

如果你在设置之后将鼠标悬停在每个条形图上，它也会将每个条形图都变成红色；）和我评论中的错误一样。 - KRONWALLED

看起来你们俩都有正确的建议，但要让它运行起来，我需要为每个条配置一系列数据... - Christian