悬停/单击更改多个图表上同一栏的背景颜色 - chart.js

Question

我有 2 个或更多 chart.js 画布。目的是在多个图表上快速查看相同的柱值。 当我将鼠标悬停在第一个图表“星期四”上的条形图上时，我想搜索并更改同一页面上不同图表的背景颜色，例如。如果酒吧“星期四”存在。

我设法用 onClick 改变了第一个图表的颜色，但我不知道如何搜索第二个图表 ID 来改变同一个柱形的颜色。

<div style="width: 400px;">
  <canvas id="myChart1"></canvas>
  <canvas id="myChart2"></canvas>
</div>



<script>

  const ctx1 = document.getElementById('myChart1');

  new Chart(ctx1, {
    type: 'bar',
    data: {
      labels: ['Mon', 'Thu', 'Wed', 'Thu', 'Fri', 'Sat'],
      datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        backgroundColor: [ "blue", "blue", "blue", "blue", "blue", "blue" ], 
        borderWidth: 1
      }]
    },
    options: {
      scales: {
        y: {
          beginAtZero: true
        }
      },
       onClick: function( evt, activeElements, chart ) {
                          var elementIndex = activeElements[0].index;
                          var horiz_value = chart.data.labels[elementIndex]; // ex Thu
 
                          var bar_bg_color_current = chart.data.datasets[0].backgroundColor[elementIndex];  // the color 


                         this.data.datasets[0].backgroundColor[elementIndex] = "red";
                         this.update();
 
                          console.log( chart.data.labels  );
                          console.log( horiz_value  );

        }, //onclick

    }
  });





  const ctx2 = document.getElementById('myChart2');

  new Chart(ctx2, {
    type: 'bar',
    data: {
      labels: ['Mon', 'Thu', 'Wed', 'Thu', 'Fri', 'Sat'],
      datasets: [{
        label: '# of Votes',
        data: [8, 4, 4, 4, 4, 4],
        backgroundColor: [ "blue", "blue", "blue", "blue", "blue", "blue" ], 
        borderWidth: 1
      }]
    },
    options: {
      scales: {
        y: {
          beginAtZero: true
        }
      }
    }
  });

</script>