Javascript 图表js数据标签样式

所以我在条形图上使用了用于Chartjs的datalabels插件。每个标签都有每月和7天前的数据。我希望数据标签是红色的每月黑色的7天前。“选项”中的“颜色”功能将2个栏组合在一起，并将2个红色2个黑色2个红色2个黑色分块显示

这里有一个到输出图表的链接

从“Chart.js”导入图表；
从“chartjs插件数据标签”导入ChartDataLabels；
要求（“../Row4/Row4Charts/RoundedBars.js”）；
导出默认类取消7dayshart扩展组件{
cancellations7dayshart=React.createRef（）；
componentDidMount（）{
const cancellations7dayshart=this.cancellations7dayshart.current.getContext(
“2d”
);
新图表（取消7天）{
输入：“酒吧”，
数据：{
标签：[“DSL”、“FTTC”、“FTTP”、“GFast”]，
数据集：[
{
标签：“每月”，
数据：[7,19,2,0]，
背景颜色：[
“rgba（255,9,49）”，
“rgba（255,9,49）”，
“rgba（255,9,49）”，
rgba（255、9、49）
],
边框颜色：[
“rgba（0193189）”，
“rgba（255,9,49）”，
“rgba（0193189）”，
rgba（0193189）
],
边框宽度：1，
点半径：4，
},
{
标签：“7天前”，
数据：[2,11,5,3]，
背景颜色：[
“rgba（208、210、211）”，
“rgba（208、210、211）”，
“rgba（208、210、211）”，
rgba（208、210、211）
],
边框颜色：[
“rgba（208、210、211）”，
“rgba（208、210、211）”，
“rgba（208、210、211）”，
rgba（208、210、211）
],
边框宽度：1，
点半径：6，
}
]
},
选项：{
维护Aspectratio：是的，
转弯半径：6，
门诊人数：65人，
斜线：{
显示：真
},
工具提示：{
已启用：true
},
标签：{
usePointStyle:true
},
图例：{
位置：“底部”，
标签：{
过滤器：功能（legendItem，取消7DaysChart）{
return！legendItem.text.包括（“每月”）；
}
}
},
比例：{
滴答声：{
最大限值：1，
最高：15，
显示：假
},
//雅克斯变化
雅克斯：[
{
网格线：{
抽边线：假，
显示：假
},
滴答声：{
贝吉纳泽罗：是的，
显示：假
}
}
],
//xaxes变化
xAxes：[
{
滴答声：{
//在这里更改字体
},
网格线：{
抽边线：假，
显示：假，
scaleShowLabels:false
}
}
]
},
插件：{
数据标签：{
颜色：[“红”、“黑”、“红”、“黑”、“红”、“黑”、“红”、“黑”、“红”、“黑”]，
对齐：“结束”，
主播：“结束”
}
}
}
});
}
render（）{
返回(
);
}
}

您需要创建一个函数，根据标签更改颜色：

plugins: {
    datalabels: {
        anchor: 'end',
        align: 'end',
        color: function(context) {
            var index = context.dataIndex;
            var value = context.dataset.data[index];
            var valueRed = context.dataset.label;

            if(valueRed === 'Monthly') {
                return value = 'red';
            } else {
                return value = '#000';
            }
        }
    }
}

以下是一个工作示例：

---

有关插件页面格式的更多信息：

您需要创建一个函数，根据标签更改颜色：

plugins: {
    datalabels: {
        anchor: 'end',
        align: 'end',
        color: function(context) {
            var index = context.dataIndex;
            var value = context.dataset.data[index];
            var valueRed = context.dataset.label;

            if(valueRed === 'Monthly') {
                return value = 'red';
            } else {
                return value = '#000';
            }
        }
    }
}

以下是一个工作示例：

有关插件页面中格式设置的更多信息：