javascript - 单击时图表 js 背景颜色更改

Question

我用图表 js 内置了堆叠条。该栏有三行，顶行背景设置为白色，如下所示。

上面的工作正常，这就是我的设置

this.barChart.datasets = [
    {
        label: myLabels1,
        data: myData1,
        dataLabel: ['', ''],
        backgroundColor: ['#FFC500', '#673AB6']
    },
    {
        label: totalLabels,
        data: totalData,
        backgroundColor: ['#FFFFFF', '#FFFFFF']
    }
];

上面的工作正常，正如我所希望的那样。当我点击栏时出现问题。它在现有颜色之上添加背景颜色，如下所示。 bgColor 看起来像下面的阴影，因为顶行是白色的，因此有阴影。

我已尽一切可能禁用此更改，但都无济于事。我尝试玩图表的点击事件但没有任何效果。请问我该如何禁用这种效果？它从哪里来？任何帮助将不胜感激。

Chart.js 版本

"chart.js": "^2.6.0",

Answer 1

据我所知，这不是 chart.js 向您的组件添加背景颜色，而是您的浏览器显示您已选择此区域。我认为这无法解决，除非您通过向图表添加此 CSS 来禁用图表选择。

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}