我见过一些较老的问题(such as this one),它们展示了如何使用options.scales.xAxes.ticks.major.fontStyle属性修改Chart.js 2.x.x中的主要刻度字体样式.但是,fontStyle似乎不是3.x.x中的有效属性.我认为问题可能在于3.x.x使用了font个对象,所以我try 添加options.scales.x.ticks.major个对象中的一个,如下所示:

           ticks: {
                major: {
                    enabled: true,
                    font: {
                       weight: 'bold'
                    },
                },

然而,这并没有什么效果.接下来,我try 在options.scales.x.ticks以内使用一个回调函数,但无法找到任何方法来访问回调函数中的tick格式(尽管我至少在主要tick中添加了"--"作为临时方法将它们分开):

                callback: function(value, index, ticks) {
                    if(ticks[index].major == true) {
                        return "--" + value + "--";
                    }
                    else {
                        return value;
                    }
                }

最后,我看到了this question的"scriptable options"答案,所以我try 在options.scales.x.ticks.font.weight中添加一个脚本,如下面的最终配置所示.我确信这样做是正确的,但我的代码肯定有一些问题.有谁能弄明白吗?以下是完整的配置:

const bgPlugin = {
    id: 'customBgColor',
    beforeDraw: (chart, args, options) => {
        const {ctx} = chart;
        ctx.save();
        ctx.globalCompositeOperation = 'destination-over';
        ctx.fillStyle = options.color || "#f5f3ef";
        ctx.fillRect(0, 0, chart.width, chart.height);
        ctx.restore();
    }
};

var data = {
  datasets: [{/* formatted data is inserted here by the PHP parent script */}]};
  
var config = {
  type: 'line',
  data: data,
  options: {
    parsing: false,
    animation: false,
    plugins: {
      decimation: {
        enabled: true,
        algorithm: 'min-max',
      },
      customBgColor: {
          color: "#f5f3ef",
      }
    },
    scales: {
        x: {
            type: 'time',
            adapters: {
                date: {
                    zone: "America/Los_Angeles",
                },
            },
            ticks: {
                major: {
                    enabled: true,
                },
                font: {
                    weight: (c) => {
                        if(c.major == true) {
                            return 'bold';
                        }
                        else {
                            return 'normal';
                        }
                    }
                },
            }, 
        },
    },
  },
  plugins: [bgPlugin],
};

Here are two examples of charts produced by the above configuration over different time ranges, you can see the major ticks are '5 PM', etc., in first chart, and are the dates in the second chart, but they are not bold: a chart of temperatures for three sensors

a similar chart over a greater time range

推荐答案

  1. 权重回调中的c是一个上下文,而不是一个刻度,所以它应该是c.tick.major,而不仅仅是c.major
  2. 对我来说,只有当我为整个字体而不仅仅是字体编写回调时,它才能起作用.weight:
font: context => {
  if (context.tick && context.tick.major) {
    return {
      weight: 'bold'
    };
  }
}

jsFiddle示例- https://jsfiddle.net/hrvb0L5y/

文档中的示例(出于某种原因,仅在迁移指南中)-https://www.chartjs.org/docs/master/migration/v3-migration.html

Javascript相关问答推荐

我的glb文件没有加载到我的three.js文件中

Vega中的模运算符

网页自检测外部元素无法加载

如何找出摆线表面上y与x相交的地方?

屏幕右侧屏障上的产卵点""

我的角模板订阅后不刷新'

我怎么才能得到Kotlin的密文?

优化Google Sheet脚本以将下拉菜单和公式添加到多行

Chart.js-显示值应该在其中的引用区域

我创建了一个创建对象的函数,我希望从该函数创建的对象具有唯一的键.我怎么能做到这一点?

我在Django中的视图中遇到多值键错误

如何在使用rhandsontable生成表时扩展数字输入验证?

JavaScript不重定向配置的PATH

在VS代码上一次设置多个变量格式

将对象推送到数组会导致复制

当代码另有说明时,随机放置的圆圈有时会从画布上消失

如何在Press上重新启动EXPO-AV视频?

为什么我的Navbar.css没有显示在本地主机页面上?

使用Java脚本筛选数组中最接近值最小的所有项

在Reaction Native中,ScrolltoIndex在结束时不一致地返回到索引0