内联插件不起作用

2024-03-04

根据Chart.js 文档 http://www.chartjs.org/docs/latest/developers/plugins.html,以下代码应该可以工作:

new Chart(document.getElementById(chartID), {
   type: 'pie',
   responsive: true,
   maintainAspectRatio: false,
   data: {
      labels: graph.globals.labels,
      datasets: [{
         backgroundColor: pieOptions.backgrounds,
         data: pieOptions.objToArr(graph.meetingsData),
         hoverBorderWidth: 5,
         borderColor: 'transparent',
      }]
   },
   options: {
      title: {
         display: true,
         text: graph.globals.title,
      },
      legend: {
         display: true,
         position: 'bottom',
         fullWidth: false,
         onClick: () => {},
         labels: {
            generateLabels: (chart) => {
               return pieOptions.legendLeft(chart);
            }
         }
      },
      plugins: [{
         beforeInit: function(chart, options) {
            console.log('yolo');
         }
      }]
      rotation: 3.9,
   }
});

但是,当我使用变量创建插件,或者像上面所示那样内联创建插件时,它不会记录任何内容。我可以使用插件的唯一方法是在全局注册它。

有人可以向我解释为什么它不起作用吗?


plugins应放置在其自己的配置部分中,而不是嵌套在options.

代替:

options: {
    title: {
        display: true,
        text: graph.globals.title,
    },
    legend: {
        display: true,
        position: 'bottom',
        fullWidth: false,
        onClick: () => {},
        labels: {
            generateLabels: (chart) => {
                return pieOptions.legendLeft(chart);
            }
        }
    },
    plugins: [{
        beforeInit: function(chart, options) {
            console.log('yolo');
        }
    }]
    rotation: 3.9,
}

您的代码应如下所示:

options: {
    title: {
        display: true,
        text: graph.globals.title,
    },
    legend: {
        display: true,
        position: 'bottom',
        fullWidth: false,
        onClick: () => {},
        labels: {
        //   generateLabels: (chart) => {
        //      return pieOptions.legendLeft(chart);
        //    }
        }
    },
    rotation: 3.9,
},
plugins: [{
    beforeInit: function(chart, options) {
        console.log('yolo');
    }
}]

工作 JSFiddle:https://jsfiddle.net/r1x63b8v/ https://jsfiddle.net/r1x63b8v/

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

内联插件不起作用 的相关文章

  • Chart JS:忽略 x 值并将点数据放在第一个可用标签上

    我正在 Chart js 中制作折线图 并且遇到一个问题 我试图在线上绘制点数据 但它忽略了我给出的 x 值 而是将它们放在第一个可用标签上 this myLineChart new Chart this ctx type line dat
  • 条形图中每个条形有不同的颜色;图表JS

    我在我正在开发的项目中使用 ChartJS 并且我需要为条形图中的每个条形使用不同的颜色 以下是条形图数据集的示例 var barChartData labels 001 002 003 004 005 006 007 datasets l
  • ChartJS 不使用 Moment.js 显示时间数据

    我正在尝试按小时绘制给定日期的一系列数据点 并非每个小时都包含在数据集中 但我仍然想显示从 0 00 23 00 的时间并绘制可用的数据点 我的错误是 该方法未实现 要么找不到适配器 要么找不到适配器 提供了不完整的集成 然而 纵观文档 h
  • 插入百分比 Charts.js 甜甜圈

    我正在使用 Charts js 库 想知道如何在圆环图的孔中添加一些标记 比如百分比 My js jQuery document ready function var data value 5 color A1638C highlight
  • Chart.js 混合图表的工具提示悬停自定义

    我在尝试使用 Chart js 自定义混合图表的悬停工具提示时遇到了一些问题 我有一个条形图显示某种产品的总利润 还有一个折线图显示该某种产品的总量 当我将鼠标悬停在条形图上时 我希望工具提示显示如下内容 Total profit 1399
  • Chart.js 响应式条形图标签大小调整

    所以我有一个使用 Chart js 的条形图 并且启用了响应式功能 它似乎适用于某些图表 但不适用于其他图表 例如 我的条形图标签似乎没有随窗口调整大小 但其他所有内容都会使整个图表在较小的窗口尺寸下看起来非常奇怪 如何重新调整标签大小以使
  • 将 FirestoreCollection 转换为数组?

    我在将 Firestore 数据转换为 Chart js 图表的数组时遇到困难 从 Firestore 获取数据 fetchData Get data this updatesCollection this afs collection p
  • vue.js vue-chartjs 图表在更换、更新图表数据等时不会更新

    我正在尝试使用 vue chartjs 制作 vue 我已遵循所有有关在更新 ChartData 属性时重新渲染图表的相关文档 我的图表只会在调整浏览器窗口大小后更新 我的parenttestchart vue 文件
  • 如何防止标签在移动屏幕 Chart.js 上重叠

    我正在使用这个例子jsfiddle https jsfiddle net Trekels fec0v5kj 但是当我使用小屏幕时标签开始像这样重叠 我可以做什么来预防它 我想让它完全响应 我尝试改变长度和其他长宽比等 但没有成功 var c
  • 我想隐藏工具提示中的标签,因为它显示未定义

    我正在使用 Chart js 来显示折线图 如何隐藏 Chart js 折线图的工具提示标签 工具提示中的标签显示undefined所以我想隐藏标签 请参见屏幕截图 也许有一种方法可以修改工具提示 让我只能在工具提示中显示图例值 我的代码如
  • 添加 X 轴标题会导致 Uncaught RangeError:minimumFractionDigits value is out of range in Chart.js

    我正在尝试向 Chart js 图表的 X 轴添加标题 但是当我将标题属性放在 x 轴上时 出现错误 Uncaught RangeError minimumFractionDigits value is out of range 但它并没有
  • Chart.JS 工具提示回调标签和标题 (v3.5)

    请注意 v2 有很多答案 这是 v3 的 我正在尝试设置工具提示label and title对于圆环图 Code Create the donut chart donut new Chart questions positivity do
  • 使用chartJS显示带有连接点的折线图

    我想使用 ChartJS 绘制这样的图表 但我找不到连接第一个和最后一个点并在该连接区域内显示单个唯一点的解决方案 我还需要用不同的颜色设置每个点的样式 我尝试探索 ChartJS 文档但找不到解决方案 是否有任何图表绘制库具有这些功能或如
  • Angular-Chart.js 它不显示图表

    我正在尝试使用 Angular chart js 它没有为我显示任何内容 这是我的 javascript 和 html 页面 function angular module app chart js controller BarCtrl f
  • 如何使用 Chart.js 版本 3.2.1 在圆环图中添加文本

    我正在使用 Canvas 在 HTML 中使用 如何使用在圆环图中添加文本 这是我的 javascript 代码和 HTML 代码 我使用了图表js版本3 2 1 所以请给出相同版本 3 的解决方案 var overallStatsCanv
  • Chart.js 点击标签,使用条形图

    我需要有关 Chart js 交互性的帮助 当我单击标签时 我需要返回我单击的列 索引 号 我尝试使用 getElementsAtEvent 但只有当我直接单击图表时它才有效 This http jsfiddle net yxz2sjam
  • Chart.js,设置最大值

    我正在制作雷达图Chart js 但它只会变得与其中的最大值一样大 我希望将其设置为标准最大值 因此范围是 0 到 100 您可以看到您在不同主题上的进度如何 有谁知道如何设置雷达图的最大范围值Chart js 我尝试添加一个设置为 100
  • 画布已投入使用。必须先销毁 ID 为“0”的图表,然后才能重新使用画布。图表.JS

    我已经有了图表的数据 我不需要在图表中收到警告 不需要破坏图表 在不破坏图表的情况下更新日期 我用了 myChart 更新 但这不起作用是否还有其他方法可以解决上述错误 const TapsGraphCard props any gt va
  • 按 Chartjs 条形图的键对对象进行分组

    我正在尝试使用 Chart js 创建条形图 我在尝试根据每个用户的状态创建分组条形图时陷入困境 这是数据 statusId 0 firstName Joe status appealed count 1 statusId 0 firstN
  • Chart.js 在初始化时设置活动段

    我正在使用 Chart js v2 并且尝试在加载图表时模拟圆环图上某个段的 悬停状态 因此看起来有一个部分已突出显示 我已经搜索和梳理了代码一天 但找不到一个好的方法来做到这一点 提前致谢 设置片段的悬停样式有点令人困惑 因为它没有真正记

随机推荐

  • 如何检测访问者所在国家/地区

    为了检测访问者国家 地区 我在许多论坛中看到了下面建议的代码 但我无法让它工作 modGlobal ResolveCountry ThreeLetterISORegionName 在我的本地计算机上 它正确返回我的计算机区域设置区域 而在生
  • Android:套接字已关闭

    电脑客户端 public class PCServer param args static Socket socket null private static String ip 192 168 42 129 private static
  • 使用 FOSUserBundle 创建自定义字段

    我想使用 FOSUserBundle 添加地址和电话号码 如何使用 FOSuserBundle 添加自定义字段以获得包含地址和电话号码的个人资料 创建自己的用户包并在 MyCompanyUserBundle php 中设置 public f
  • 可以使用 SQL 按日期排序,但将空日期放在结果集的后面吗?

    我在 MySQL 数据库中有一堆任务 其中一个字段是 截止日期 并非每项任务都必须有截止日期 我想使用 SQL 按截止日期对任务进行排序 但将没有截止日期的任务放在结果集的后面 就像现在一样 空日期首先显示 然后其余日期按最早到最晚的截止日
  • 为什么性能分析器中的内存使用部分被禁用?

    我想运行内存使用会话或对象分配 最好两者都运行 但我只有可用类型 CPU 使用情况和 GPU 使用情况 当给定部分被禁用时 VS 不会显示任何提示 我尝试了我编写的其他几个项目 一个接一个都只有这两个部分 我运行 64 位 Windows
  • 加载PEM格式证书

    如何在 openssl c 中将 PEM 格式证书加载为 x509 int SSL use certificate SSL ssl X509 x int SSL use certificate ASN1 SSL ssl unsigned c
  • php_mongo 扩展已安装,但为什么 rockmongo 仍然无法连接?

    我有一个wamp服务器 我还安装了 mongodb 我已经安装了 php mongo 扩展 在 php ini 中进行更改 我下载了 rockmongo 将文件解压到我的 www 文件夹中 我编辑了配置文件 但是当我尝试打开 GUI 时 它
  • Rails 4 中具有多个字的控制器的路由

    我刚刚升级到 Rails 4 发现路由出现意外行为 我们有一个名为 EmailPreviewController 的控制器 其路由是 get emailpreview controller EmailPreview action index
  • 配置 webpack 以允许浏览器调试

    我是 webpack 的新手 我正在转换现有的 Web 应用程序以使用它 我正在使用 webpack 来捆绑和缩小我的 JS 这在部署时非常有用 但这使得在开发过程中调试非常困难 通常我使用 chrome 内置的调试器来调试 JS 问题 或
  • SQL Server 探查器

    当您使用 SQL Server 探查器时 持续时间和 CPU 之间有什么区别 我知道默认情况下两者都以毫秒显示 CPU 是运行查询所需的 CPU 时间 而持续时间更像是查询返回任何数据所需的时间 根据我的理解 如果存在任何阻塞等 您的 CP
  • 如何在Java中使用PDFBox获取PDF文件中的所有书签

    我是 Apache PDFbox 的新手 我想使用Java中的PDFBox库提取PDF文件中的所有书签 知道如何提取它们吗 来自在源码下载中 PDDocument document PDDocument load new File PDDo
  • 将表从一个数据库复制到另一个数据库的最简单方法?

    当数据库位于不同用户下时 将数据从一个数据库中的表复制到另一个数据库中的表的最佳方法是什么 我知道我可以使用 INSERT INTO database2 table2 SELECT from database1 table1 但这里的问题是
  • Android 应用程序通过移动端口使用 P2P 模式流式传输 IP 摄像机?

    我正在尝试通过 Android 应用程序上的 IP 摄像头流式传输视频 我已经使用以下方法成功获取了视频 使用媒体播放器和 Surface View 的 RTSP 使用视频视图的 RTSP 重定向到 VLC 以流式传输视频 重定向到本机 用
  • 实际示例使用 dup 或 dup2

    我知道什么dup dup2 http www opengroup org onlinepubs 009695399 functions dup html可以 但是不知道什么时候会用到 有什么实际例子吗 示例之一是 I O 重定向 为此 您分
  • android sdk 位置不能位于文件系统根目录

    我已经将 Android Studio 安装在 F 驱动器中 我的 Flutter 项目位于 E 驱动器中 Flutter插件安装在Android Studio中 但是当我在 Android Studio 中打开项目并转到 SDK 管理器时
  • 在具有自动高度的 IFrame 中获取 Google 表单

    所以我有一个用 Google Docs 构建的表单 因为它看起来比从头开始更容易 我通过将代码从谷歌页面复制粘贴到我的域上的页面来实现这一点 我设法用我在这里找到的这个可爱的小脚本让它自动调整其高度 http www frontpagewe
  • 仅在给定用户 ID 的情况下选择固定范围高分的有效方法

    我有一个表格 其中包含每个球员参加过的每场比赛的记录 从这个问题的最佳答案我已经有了一个很好的开始 百万条目排名 https stackoverflow com questions 5436263 ranking with millions
  • 检测android中的home按钮按下

    这已经让我发疯有一段时间了 有没有什么方法可以可靠地检测 Android 应用程序中是否按下了主页按钮 如果做不到这一点 是否有一种可靠的方法来判断是什么导致活动进入 onPause 即我们能否检测到它是否是由新活动启动或按返回 主页引起的
  • AWS DynamoDB - 如何在 1 次调用中实现:如果集合存在,则添加要设置的值 - 或者用值实例化集合?

    我有一个用户表 有一个名为 朋友 的属性 它将是用户所有朋友的 id 的集合 最初 我尝试在创建用户时将 Friends 属性实例化为空集 但收到错误消息 指出不能有空属性 因此 如果某人还没有朋友 我能找到的唯一解决方案是读取用户的属性
  • 内联插件不起作用

    根据Chart js 文档 http www chartjs org docs latest developers plugins html 以下代码应该可以工作 new Chart document getElementById char