从点样式图例中删除 ChartJS 2 边框和阴影答案

【问题标题】：Removing ChartJS 2 border and shadow from point style legend从点样式图例中删除 ChartJS 2 边框和阴影
【发布时间】：2018-05-07 17:41:05
【问题描述】：

我正在使用以下选项通过 ChartJS 2 获取点样式图例：

options: {
    legend: {
        labels: {
            usePointStyle: true
        }
    }
}

但是，如下图所示，每个点都包含一个边框和一个阴影：

使用的是 ChartJS 2.7.2。

是否有控制边框和阴影的选项？如何删除它们？

【问题讨论】：

标签： chart.js chart.js2

【解决方案1】：

查看实现后，我注意到边框和阴影由每个数据集定义的borderWidth 属性控制。这是一个移除边框和阴影的示例。

const dataset = [
    {
        borderWidth: 0,
        data: ...,
        label: ...,
        backgroundColor: ...,
        hoverBackgroundColor: ...,
    }
];

请注意，点直径与标签字体大小相关。

【讨论】：

【解决方案2】：

由于borderWidth: 0 单独似乎不起作用，解决方法是将borderColor 设置为0 opacity：

  datasets: [
    {
      data: defaultData,
      backgroundColor: colors,
      borderWidth: 0,
      borderColor: "rgba(0,0,0,0)", 
    },

【讨论】：