我已经有一段时间没有发表问题了,所以如果我没有遵守规则-请耐心等待。附件是我目前的代码和图表的参考图片。我也是非常新的ChartJS。
这可能有点奇怪,但客户端有自己的软件渲染图表,而我无法访问原始代码。因此,经过几个小时的尝试后,解决这个问题的方法是使用全局变量。
图表上的每个点都有一个灰色标签显示值。目前每个点的值都是100%。我想知道是否有办法更改这些数据点标签的颜色?我尝试过研究,但似乎每个人都创建了当前图表的示例,更改了选项/数据集,然后再次呈现。
**我的问题:**是否有Chart.defaults.global用于更改数据点标签的www.example.com?
英译汉提前感谢!只是厌倦了浪费时间去弄清楚这件事
当前代码:
Chart.defaults.global.defaultFontColor = "#fff";
Chart.defaults.global.defaultColor = "#fff";
Chart.defaults.scale.gridLines.color = "#fff";
Chart.defaults.scale.gridLines.zeroLineColor = "#fff";
Current Chart JS Chart Image
顺便说一句,重新渲染一个图表示例似乎不起作用,但也许它起作用了,我只是不知道我在做什么。
<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>
1条答案
按热度按时间xxe27gdn1#
默认情况下,Chart.js本身不会绘制任何数据标签。您很可能已经激活(导入)了一个绘制这些标签的插件,如chartjs-plugin-datalabels(另请参阅this answer)。
对于
chartjs-plugin-datalabels
,可通过脚本化选项datalabels.color
获得单独着色的数据标签。请查看Custom Labels示例页面并了解它的工作原理。