我已经有一段时间没有发布问题了，所以如果我不遵守规则-请原谅我。附件是我目前的代码和参考图像的图表。我也是VERY
这可能有点奇怪，但是客户有他们自己的软件渲染图表，我无法访问原始代码。因此，经过数小时的尝试，解决这个问题的方法是使用全局变量。
图表上的每个点都有一个灰色标签显示其值。目前每个值都是100%。我想知道是否有一种方法来改变这些数据点标签的颜色?我试过研究，但似乎每个人都创建他们当前图表的实例，更改选项/数据集，然后再次渲染它。
我的问题: 是否有一个Chart.defaults.global用于更改数据点标签?
提前感谢!只是厌倦了浪费时间想弄明白。(
当前代码:
Chart.defaults.global.defaultFontColor = "#fff";
Chart.defaults.global.defaultColor = "#fff";
Chart.defaults.scale.gridLines.color = "#fff";
Chart.defaults.scale.gridLines.zeroLineColor = "#fff";
当前图表JS图表图像
Btw -重新渲染图表的实例似乎不工作，但也许它只是我不知道我在做什么。这是从Chrome开发工具中提取并美化的预渲染图表的HTML代码。
<canvas class="tsjschart chartjs-render-monitor" id="ChartKpiTrendLine" data-tschart="{
" chartID ": "ChartKpiTrendLine ",
"tooltipID ": "ChartKpiTrendLine_Tooltip ",
"config ": {
"pointLabelSize ": 12,
"pointLabelColor ": "#606060 ",
"hasPointTooltip ": true,
"hasPointLabel ": true,
"tsLimitPluginData ": null,
"datasets ": [
{
"label ": "1 ",
"fill ": false,
"lineTension ": 0,
"borderColor ": "#418CF0 ",
"hoverBorderColor ": "#418CF0 ",
"borderWidth ": 2,
"borderDash ": [],
"data ": [
{
"x ": "2022-06-20T11:00:00.000-05:00 ",
"y ": 100.0
},
{
"x ": "2022-06-20T12:00:00.000-05:00 ",
"y ": 100.0
},
{
"x ": "2022-06-20T13:00:00.000-05:00 ",
"y ": 100.0
},
{
"x ": "2022-06-20T14:00:00.000-05:00 ",
"y ": 100.0
},
{
"x ": "2022-06-20T15:00:00.000-05:00 ",
"y ": 100.0
}
],
"pointStyle ": "circle ",
"pointRadius ": [
4,
4,
4,
4,
4
],
"pointHoverRadius ": 6,
"pointBorderWidth ": 0,
"pointBackgroundColor ": [
"#0F59BC ",
"#0F59BC ",
"#0F59BC ",
"#0F59BC ",
"#0F59BC "
],
"pointBorderColor ": [
"#0F59BC ",
"#0F59BC ",
"#0F59BC ",
"#0F59BC ",
"#0F59BC "
],
"backgroundColor ": "#0F59BC ",
"hoverBackgroundColor ": "#0F59BC "
}
],
"tsTooltipPluginData ": [
[
"<b>11:00 AM</b>
<br/>100.0 %", "<b>12:00 PM</b>
<br/>100.0 %", "<b>1:00 PM</b>
<br/>100.0 %", "<b>2:00 PM</b>
<br/>100.0 %", "<b>3:00 PM</b>
<br/>100.0 %" ] ], "tsLabelPluginData": [ [ "100.0 %", "100.0 %", "100.0 %", "100.0 %", "100.0 %" ] ], "valueAxisEnabled": true, "valueAxisDecimalPlaces": 1, "valueAxisScaleLabelEnabled": false, "valueAxisScaleLabel": "", "valueAxisScaleLabelSize": 12, "valueAxisTickSize": 12, "valueAxisTickBeginAtZero": true, "valueAxisMin": 0.0, "valueAxisMax": 120.0, "valueAxisTickStepSize": 20.0, "valueAxisType": "linear", "groupAxisEnabled": true, "groupAxisScaleLabelEnabled": false, "groupAxisScaleLabel": "", "groupAxisScaleLabelSize": 12, "groupAxisTickSize": 12, "groupAxisTimeFormat": "LT", "groupAxisTickMinRot": 0, "groupAxisTickMaxRot": 90, "groupAxisTickMaxCharacters": 0, "groupAxisIsTime": true, "groupAxisTimeIsUtc": false, "groupLabelIsDt": true, "groupLabelIsUtc": false, "groupAxisTimeUnit": "hour", "groupAxisTickStepSize": 1.0, "groupAxisAutoSkip": false, "groupAxisLabelDict": { "1655740800000": "2022-06-20T11:00:00-05:00", "1655744400000": "2022-06-20T12:00:00-05:00", "1655748000000": "2022-06-20T13:00:00-05:00", "1655751600000": "2022-06-20T14:00:00-05:00", "1655755200000": "2022-06-20T15:00:00-05:00" }, "labels": [ "2022-06-20T11:00:00-05:00", "2022-06-20T12:00:00-05:00", "2022-06-20T13:00:00-05:00", "2022-06-20T14:00:00-05:00", "2022-06-20T15:00:00-05:00" ], "legendEnabled": false, "groupAxisType": "time" }, "hasClickEvent": true, "maintainAspectRatio": false, "animationIsEnabled": true }" width="803" height="562" style="display: block; height: 450px; width: 643px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); cursor: default;"> </canvas>
</div>
<div class="tsjschart-tooltip" id="ChartKpiTrendLine_Tooltip" style="left: 857.663px; top: 529.113px; padding: 6px; display: none;"></div>
</div>
</div>
</div>
</div>
</div>
Chart.js默认不绘制任何数据标签。你很可能已经激活(导入)了一个插件，比如chartjs-plugin-datalabels，它可以绘制这些标签(参见这个答案)。
对于chartjs-plugin-datalabels，可以通过可脚本化选项datalabels.color获得单独着色的数据标签。
options: {
plugins: {
datalabels: {
...
color: ctx => ['red', 'blue', 'green', ...]
...
请查看自定义标签示例页面，看看它是如何工作的。