内联插件不起作用

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 中的水平条形图

    我正在尝试使用 Chart js 2 3 0 绘制水平条形图 var MeSeContext document getElementById MeSeStatusCanvas getContext 2d var MeSeData label
  • Chart.js 错误:您可能需要适当的加载器来处理此文件类型

    我目前正在尝试使用Chart js在我的反应应用程序中 但是当我去构建我的应用程序时 我遇到了这个错误 ERROR in node modules chart js dist chart esm js Module parse failed
  • 使用 Chart.js 绘制条形图的 X 轴多色标签

    我需要不同颜色的 x 轴标签 我使用 chart js 我尝试了下面的代码 但它不起作用 只显示单色 scales xAxes ticks fontColor rgba 245 88 97 1 rgba 245 88 97 1 rgba 2
  • 如何使用 Chartjs 绘制带有基于时间的 x 轴的单行彩色条

    我有一些基于时间的数据 我想要图形表示 并希望使用 Chartjs 来绘制它 数据如下所示 Time State 7am up 9am down 10 45am out 17 35 up 另外 每个 状态 都有自己的颜色 所以在使用条形图时
  • 未捕获的 ReferenceError:未定义 require - Chart.js

    我使用 Chart js 新版本 作为 但是当我在 chrome 中演示时 出现错误 chart js 4 Uncaught ReferenceError require is not defined Image https i stack
  • 如何增加标签和图表区域之间的空间?

    我所有的标签都在栏的顶部 我可以看到这个 but I want that would be like this 填充不适用于税费 但适用于税费 legend display false scales xAxes position top s
  • 如何隐藏/不绘制具有 0/null/未定义值的条形?

    如何隐藏错误的值 0 空或未定义 我尝试过做类似的事情 new Chart this barCanvas nativeElement data datasets data value lt 1 null value value2 lt 1
  • ChartJS 不使用 Moment.js 显示时间数据

    我正在尝试按小时绘制给定日期的一系列数据点 并非每个小时都包含在数据集中 但我仍然想显示从 0 00 23 00 的时间并绘制可用的数据点 我的错误是 该方法未实现 要么找不到适配器 要么找不到适配器 提供了不完整的集成 然而 纵观文档 h
  • Chart.js 响应式条形图标签大小调整

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

    我正在使用 Chart js 并且尝试将饼图上的标签移到饼图区域之外 请参见红色 X 这是我现在的代码 div class container h4 class title Title h4 div
  • Chart.js 中未显示折线图

    问题很严重 我看不到图表的线条 当我按下任何按钮时 X 轴的时间应该根据按下的按钮而相应地变化我已经浏览文档很长一段时间了 但仍然无法弄清楚 图表数据 import React useRef useEffect useState from
  • 使用捆绑(CDN)chartjs-adapter-date-fns.bundle.min.js 配置区域设置?

    我在客户端 HTML 中使用 Chart js 和 date fns 适配器 https github com chartjs chartjs adapter date fns https github com chartjs chartj
  • Chart.js 每个点的自定义图像

    我正在使用 Chart js 并且正在寻求有关散点图上每个点的自定义图像的帮助 我尝试过使用 javascript 图像数组 但它不起作用 我是 canvas 和 html5 的新手 我想要的是每个点都是用户的小个人资料图片而不是圆圈 一个
  • 如何更改 Angular-Chart.js 的颜色

    我使用 Angular Chart js AngularJSChart js http www chartjs org 版本 来创建条形图 图表正在使用除颜色之外的选项 即使我设置了它们 它也会显示在文档中 http jtblin gith
  • 使图表 js 中的标签响应式

    我很难使 y 轴上的标签响应 我希望标签移动到多行 并在空间不足时具有响应式字体大小 我正在使用 Chart js 数据标签库进行标签在水平条形图的顶部 由于外部图表容器 标签也被隐藏 var chart new Chart ctx typ
  • 使 Chart.js 在悬停时在散点图中的点之间呈现一条线

    我有一个包含两个数据集的简单散点图 active and passive const data datasets label Active sentences A1 A2 A3 data 0 4340433805869016 0 12813
  • 如何在 ChartJS 2.0 中隐藏超出 x 轴的值?

    如何在 ChartJS 2 0 中隐藏超出 x 轴的值 您会注意到图表突出超过了 60 标记 x 轴使用时间刻度 我设置了最大值和最小值 这是我的图表配置 type line data datasets label Scatter Data
  • Chart.js 更改图例切换行为

    我有一个来自 Chart js 的雷达图 目前 它加载了所有效果很好的数据 并且支持图例的行为是通过单击图例标签来关闭与图例相关的数据 我希望能够单击图例标签 然后关闭所有其他标签 并可能引入 全部 选项 这对于 Chart js 可行吗
  • Chart.js 刻度线和 X 轴之间的空间

    我正在使用 Chart js 版本 3 x 制作一个简单的画布 它只是显示价格的演变 X 轴用于时间 Y 轴用于进化百分比 我已经成功做到了这一点 但现在 我想添加一些风格 我的目标是在标记刻度和 X 轴之间添加一些空间 我用过chart
  • d3.js 和 Chart.js 之间的比较(仅适用于图表)[关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 我在项目中多次使用过 Chart js 但从未使用过 d3 js 很多人说 d3 js 是最好的图表 javascript 框架 但没

随机推荐

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

    为了检测访问者国家 地区 我在许多论坛中看到了下面建议的代码 但我无法让它工作 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