Question

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

这可能吗？

THX

编辑：我添加了一个小例子。 https://jsfiddle.net/10n39cLz/1/ 点击的元素将使用：@Override protected void onPause() { super.onPause(); SharedPreferences prefs = getSharedPreferences("X", MODE_PRIVATE); SharedPreferences.Editor editor = prefs.edit(); editor.putString("lastActivity", getClass().getName()); editor.commit(); } }

收集

Answer 1

如果您花费一些时间与<{3}}和你的元素一起玩，你会看到如果你log你的元素，你将拥有一个只有一个对象的数组（所述元素）。

这个对象有几个孩子，比如_index（你在小提琴中使用的）这是您应该开始编辑元素背景的地方。

如果你深入到_chart孩子的内心，你最终可以编辑你想要的栏。

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

<小时/> 请注意如果here it is超出元素，效果将会消失。

Answer 2

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

Answer 3

我发现了一个非常优雅的解决方案只需修改保存在数组中的backgroundColor。遗憾的是，render（）还不够，因此我需要进行更新（）..

希望顺便使用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
    }
  }
})

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

3 个答案: