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

jm81lzqq  于 2023-04-04  发布在  Java
关注(0)|答案(1)|浏览(89)

我有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>
2izufjch

2izufjch1#

您需要在创建第二个图表时将其分配给常量或变量。

const myChart2 = new Chart('myChart2', { ... }

然后,您可以从onClick处理程序中访问它,并执行与第一个图表几乎相同的操作。
请看一下下面修改后的可运行代码,看看它是如何工作的。
x一个一个一个一个x一个一个二个x

相关问题