ChartJS 如何去除图表工具提示中的白色方形轮廓或边框?

iszxjhcz  于 2022-11-06  发布在  Chart.js
关注(0)|答案(3)|浏览(443)

我正在使用ChartJS,但我不知道如何去除工具提示中的白色框。什么设置/选项可以设置去除边框/白色轮廓或至少让我设置颜色?
谢谢你,谢谢你

data_sets.push({
    data: date_list["data_counts"],
    label: date_list["name"],
    fill: true,
    backgroundColor: transparentizeColor,
    borderColor: newColor,
    pointBackgroundColor: newColor,
    pointBorderColor: newColor,
  })

my_chart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: data["date_labels"],
        datasets: data_sets
    },
    options: {
        tooltips: {
            intersect: false,
        },
        elements: {
            point: {
                radius: 0
            }
        },
        legend: {
            display: false
        },
        scales: {
            yAxes: [{
                ticks: {
                    precision: 0,
                    suggestedMax: 3,
                    beginAtZero: true
                }
            }],
            xAxes: [{
                gridLines: {
                    display: false
                }
            }]
        }
    }
}, );
kupeojn6

kupeojn61#

这确实没有选择,但您可以解决它。
白色轮廓的颜色由multiKeyBackground工具提示选项控制。通过将其设置为完全透明(#00000000rgba(0, 0, 0, 0)),并禁用数据集上的边框,它至少会看起来更好(尽管仍然不完美)。

0g0grzrc

0g0grzrc2#

我记得我也曾经遇到过这个问题,但我想不起来答案,我也找过答案......
我唯一的解决方案是使用自定义工具提示。
你可以修改我找到的这个JSFiddle。他们在css类.chartjs-tooltip-key中使用了一个带有border-radius: 5px的圆。删除这条线,你就得到了一个矩形。
要么使用整个自定义工具提示,要么使用所需的部分。

ru9i0ody

ru9i0ody3#

在撰写本文(Chart.js 3.9.1)时,可以使用工具提示回调来控制工具提示图例项的显示属性。

tooltip: {
  intersect: false,
  mode: 'index',
  callbacks:{
    labelColor: function(context) {
      return {
        borderColor: 'rgba(0, 150, 0)',
        backgroundColor: 'rgba(0, 150, 0)',
        borderWidth: 3,
        borderRadius: 2,
      }
    },
  }
},

例如,图例项Current如下所示:

回调是在Charts.js中自定义图表的一种极其强大的方法

相关问题