更改Chart.JS中的点标签颜色

mcdcgff0  于 2022-11-07  发布在  Chart.js
关注(0)|答案(1)|浏览(198)

我已经有一段时间没有发表问题了,所以如果我没有遵守规则-请耐心等待。附件是我目前的代码和图表的参考图片。我也是非常新的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>
xxe27gdn

xxe27gdn1#

默认情况下,Chart.js本身不会绘制任何数据标签。您很可能已经激活(导入)了一个绘制这些标签的插件,如chartjs-plugin-datalabels(另请参阅this answer)。
对于chartjs-plugin-datalabels,可通过脚本化选项datalabels.color获得单独着色的数据标签。

options: {
    plugins: {
      datalabels: {
        ...
        color: ctx => ['red', 'blue', 'green', ...]
        ...

请查看Custom Labels示例页面并了解它的工作原理。

相关问题