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

时间:2018-05-07 17:41:06

标签: chart.js chart.js2

我使用以下选项获取ChartJS 2的点样式图例:

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

但是,如下图所示,每个点都包含边框和阴影:

enter image description here

使用ChartJS 2.7.2。

是否有控制边框和投影的选项?我该如何删除它们?

2 个答案:

答案 0 :(得分:1)

在查看实现后,我注意到边框和阴影由每个数据集定义的borderWidth属性控制。以下是删除边框和阴影的示例。

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

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

答案 1 :(得分:0)

由于borderWidth:0似乎无法正常工作,因此一种解决方法是将borderColor设置为0不透明:

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