Chart Js可点击栏

2023-12-01

我想让我的图表 js 栏可点击。我想添加点击功能,例如链接。不知道如何继续。已阅读文档 10 次...

<script> var ctx = document.getElementById('myChart').getContext('2d');


var myChart = new Chart(ctx, {
 type: 'bar',
 data: {
labels: ['Now', '-1h', '-2h', '-3h', '-4h', '-5h', '-6h', '-7h', '-8h', '-9h', '-10h', '-11h', '-12h', '-13h', '-14h', '-15h', '-16h', '-17h', '-18h', '-19h', '-20h', '-21h', '-22h', '-23h'],
datasets: [{
  label: 'Litraa',
  data: [<?php echo "$chart_readings[0]";?>, <?php echo "$chart_readings[1]";?>, <?php echo "$chart_readings[2]";?>, <?php echo "$chart_readings[3]";?>, <?php echo "$chart_readings[4]";?>, <?php echo "$chart_readings3[5]";?>, <?php echo "$chart_readings3[6]";?>, <?php echo "$chart_readings[7]";?>, <?php echo "$chart_readings[8]";?>, <?php echo "$chart_readings[9]";?>, <?php echo "$chart_readings[10]";?>, <?php echo "$chart_readings[11]";?>, <?php echo "$chart_readings[12]";?>, <?php echo "$chart_readings[13]";?>, <?php echo "$chart_readings[14]";?>, <?php echo "$chart_readings[15]";?>, <?php echo "$chart_readings[16]";?>, <?php echo "$chart_readings[17]";?>, <?php echo "$chart_readings[18]";?>, <?php echo "$chart_readings[19]";?>, <?php echo "$chart_readings[20]";?>, <?php echo "$chart_readings[21]";?>, <?php echo "$chart_readings[22]";?>, <?php echo "$chart_readings[23]";?>],
  backgroundColor: "rgb(255, 255, 255)"
}]
},
   options: {
    tooltips: {
        mode: 'label'
    }
}
});
/*Global settings*/
Chart.defaults.global.defaultFontColor = '#fff';
</script>

如果您使用的是 Chart.js 2.4+ 版本(可能更早),则有一个非常有用的 onclick 事件。我在堆积条形图上使用它,所以它也应该适合您。您可以在文档中的通用图表配置下找到它。 (看:https://www.chartjs.org/docs/latest/charts/bar.html#stacked-bar-chart)

options:{
    onClick: graphClickEvent
}

function graphClickEvent(event, array){
    if(array[0]){
       foo.bar;
    }
}

希望这可以帮助。

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

Chart Js可点击栏 的相关文章

  • 为什么Google的闭包库不使用真正的私有成员?

    我成为 JavaScript 开发人员已经有一段时间了 我一直认为在 JavaScript 中实现私有成员的正确方法是使用 Doug Crockford 在这里概述的技术 http javascript crockford com priv
  • 异步 JS 加载到 head 中

    我需要将脚本异步加载到页面上 我正在使用createElement方法在头部动态插入脚本标签 发生的事情是首先加载页面源 完成后 头部中包含的所有元素都会并行加载 一旦全部加载完毕 我动态添加的脚本就会加载 这在逻辑上是有道理的 但我正在寻
  • 在 Angular JS 中撤消重做

    我有一个大对象排列在 rootScope 中 比如说 gt 100 个对象 每个对象又具有对象 数组的层次结构 我想使用 deepWatching watch 整个 rootScope 即将 watch 的第三个参数设置为 TRUE 但这里
  • 用于匹配重复子字符串的单个js正则表达式?

    假设我有一个字符串 例如 where is mummy where is daddy 我想用空字符串替换任何一组重复子字符串 所以在这种情况下where and is元素将被删除 结果字符串将是 mummy daddy 我想知道是否有任何单
  • Google App Script postMessage 与收件人窗口的来源不匹配

    我有一个 Google App 脚本部署为Web应用程序 https developers google com apps script guides web 它工作正常 直到今天晚上我发现它无法在 Firefox 或 Chrome 中加载
  • 根据用户的时间设置问候语(早上好,下午好......)

    任何人都可以推断如何根据用户的时间设置实现基本的 晚上好 或 早上好 也许 PHP 会获取服务器时间 但我希望用基于时间的适当问候语来问候网站访问者 并考虑到他们一天中的时间 E G 早上好 晚上好 下午好 基于它 getHours 日期对
  • CKEDITOR.styleSet.add - 'a' 元素的新样式

    由于某种原因如果我改变 p to a 它不再出现在样式列表中 有什么理由吗 CKEDITOR stylesSet add default name Wys wiersza 1 element p styles line height 18p
  • 如何确定网站的语言

    我有一个网站的网址 需要找出该网站使用哪种语言 无论是西班牙语 法语 意大利语等 该网站的顶级域名是 com 这根本没有帮助 我无法简单地检查字符串是否包含 de fr 或任何其他国家 地区代码 我试图得到lang的属性html标签 但有很
  • Yii:使用与控制器布局不同的布局渲染动作

    在 Yii 中 有没有办法使用不同的方式渲染单个动作layout比为控制器定义的值 我有一个操作希望其格式与其他操作不同 并且文档中不清楚这是否可能 我相信您可以调用该操作 layout多变的 public function actionY
  • Javascript for 循环跳过最后一个元素

    我有一个数组 根据某些条件从中删除某些元素 当我删除元素时 我会重新启动 for 循环 因为索引已刷新 var k for k 0 k lt this j data length k if condition true this j dat
  • 从变量值动态设置 ng-controller

    我正在使用 AngularJs 和 NodeJS 开发一个应用程序 我对将控制器的名称设置为主控制器中的变量的值感到震惊 为了更好地解释它 我的 index html 看起来像这样 tbody tr td td td member task
  • Jasmine 单元测试不等待承诺解析

    我有一个有角度的服务 它具有像这样的异步依赖项 function angular module app factory myService q asyncService function q asyncService var myData
  • 新部署后,React 应用程序必须清除浏览器缓存

    我们正在使用 Jenkins 管道在 apache 服务器上部署 React 应用程序 当我们部署新代码时 大多数新功能都可以正常工作 但并非所有更改都反映浏览器中的最新内容 用户必须打开隐身窗口或清除缓存才能看到新功能 我见过一些相关的解
  • 如何只允许从我的 iOS 应用程序访问我的 MySQL 数据库? (使用webapp作为数据库的网关)

    我的 iOS 应用程序需要连接到 mysql 服务器 为了实现这一目标 我想创建一个 Web 应用程序 充当客户端应用程序和服务器端数据库之间的中间人 我担心的是 有人可以简单地找出我的应用程序使用的 URL 并传递他们自己的 URL 参数
  • PHP:如何使用 nl2br() 和 HTML Purifier 保持换行?

    Issue 使用时HTML 净化器 http htmlpurifier org 为了处理用户输入的内容 换行符不会被转换为 br tags 考虑以下用户输入的内容 Lorem ipsum dolor sit amet This is ano
  • 云函数 onUpdate:无法读取未定义的属性“forEach”

    现在我正在尝试更新我的项目中的图片 我可以更新云火商店中的图片网址 但我也想使用 firebase 云功能从云存储中删除上一张图片 我想要实现的是 当我上传新图片时 从云存储中删除以前的图片 This is my data structur
  • 如何从一行获取数据并移动到模态?拉拉维尔 5.4

    我有一个表 其中列出了数据库中的产品 其中包含 ID 名称 描述以及其他数据类型 我创建了一个按钮 该按钮将调用模态来显示有关产品的更多详细信息 但是模态始终显示表中第一个产品的详细信息 而不是与其相关的 ID 我的桌子 我的表代码 tab
  • D3.js - 更改鼠标悬停时元素的不透明度 IF 条件 = false

    我正在制作一个带有过滤器的交互式 D3 js 图表 当用户单击选定的复选框时 该过滤器会显示点 此外 在鼠标悬停事件上 所选点旁边将出现一个弹出窗口 其中包含一些信息 由于图表上的点数量相对较多 因此我选择在取消选中相应复选框时使相关点变得
  • React 嵌入脚本标签不可样式化

    我打算将 SurveyMonkey 调查嵌入到我的网站中 用 React 制作 只是让它工作起来很麻烦 但最终这段代码工作了 let script let extractScript
  • JavaScript 开关(真)

    你好 我正在尝试处理 ajax json 响应 这是我的代码 success function j switch true case j choice1 alert choice2 break case j choice2 alert ch

随机推荐

  • 极坐标图在 matplotlib 中给出错误的角度

    我正在尝试用Python绘制赤经 赤纬极坐标图 其中角度表示赤经 半径表示赤纬 范围在 30之间 我的代码是 import numpy import matplotlib pyplot as pyplot ra 345 3895474541
  • 无论如何,保持导航栏中的 Bootstrap Dropdown 打开

    我有一个嵌套在导航栏中的下拉菜单 我在页面加载期间通过添加以下内容打开该菜单open类到li包含下拉菜单的元素 我希望无论用户单击什么内容或单击页面上的哪个位置 此菜单都保持打开状态 我尝试过在 Stackoverflow com 上找到的
  • 如果添加另一个数据流,解析器无法解析

    我正在尝试使用解析器来根据路由保存的给定参数检索数据 不幸的是 当我添加另一个数据流时 我的数据依赖于解析器 但实际上从未解析 如果我直接返回一个立即解析值 一切都会正常 我调试了这种情况 发现我收到了所有部分信息 但最终未能真正解决 这是
  • 使用 compgen 获取另一个命令的自动完成功能,使用哪个标志?

    我有一个自定义自动完成命令 称之为commandA in commandB我想窃取命令第一个参数的自动完成选项 因此 例如 commandA 的 argument1 的选项是 abcdef abcabc abc123 我想要类似的东西com
  • ActiveMQ 的 NoSuchMethodError

    java lang NoSuchMethodError org apache activemq thread TaskRunnerFactory setThreadClassLoader Ljava lang ClassLoader V a
  • 侧面加载即时应用程序失败:读取捆绑包超时

    无法使用 Android 模拟器来测试即时应用程序 每次我得到 侧面加载即时应用程序失败 读取捆绑包超时 我在用着 Android Studio 3 0 金丝雀 5 Emulator 运行 Android 6 0 API 级别 23 x86
  • 如何使用流畅的 NHibernate 将枚举映射为 int 值?

    问题确实说明了一切 默认情况下它映射为string但我需要它映射为int 我目前正在使用PersistenceModel如果这有什么区别的话 我可以设定我的惯例 Update发现从主干获取最新版本的代码解决了我的困境 定义这个约定的方式以前
  • 如何从自定义视图(NSView)中制作缩略图视图?

    如何制作缩略图视图 不是图像 形成自定义视图 NSView 如果自定义 NSView 的内容发生更改 缩略图视图也会发生更改 看起来像ibook作者 谢谢大家 https plus google com u 0 photos 1147559
  • 用于生成唯一 ID 的 iOS 硬件参数

    您好 我想使用任何设备硬件参数为 iOS 设备生成一个唯一的 ID 我不想使用 MAC 地址 因为 MAC 地址也有可能被更改 那么您能否告诉我是否有任何其他唯一的硬件参数可以用来生成唯一的 ID 我相信类似的事情this是普遍接受的 UU
  • 无法对已卸载的组件执行 React 状态更新。这是一个无操作

    这是控制台中的警告 警告 无法对已卸载的组件执行 React 状态更新 这是一个空操作 但它表明应用程序中存在内存泄漏 要修复此问题 请取消 useEffect 清理函数中的所有订阅和异步任务 这是我的代码 const index setI
  • 将大型 XML 文件拆分为 Hadoop 的可管理部分

    是否有一个输入类可以根据 Hadoop 中的树结构处理 多个 大型 XML 文件 我有一组具有相同架构的 XML 文件 但我需要将它们拆分为数据部分 而不是分解这些部分 例如 XML 文件为
  • NHibernate 和数据库连接故障转移?

    我正在使用 NHibernate 连接到旧的 RDBMS 系统 在高生产负载下 rdbms 服务失败 为了保持可用性 我们提供了故障转移 RDBMS 服务 有没有办法将 NHibernate 配置为在主连接关闭时使用故障转移连接字符串 附加
  • 如何在 C 中通过 execv() 执行进程时杀死进程及其所有子进程?

    我正在尝试实施一个timeout类似命令unix基于操作系统如下 int pid timer t timer id struct sigevent timer event struct itimerspec timer value void
  • 所有 Android 设备中的蓝牙 RSSI 值始终以 dBm 为单位?

    我是 Android 新手 我的应用程序使用蓝牙从小型称重传感器放大器接收数据 虽然在某些设备 三星设备 中 BT 信号强度 RSSI 会按预期变化 从短距离处的 20 左右到 10m 处的 80 左右 但在其他一些设备 至少是一款 LG
  • 无法使用 cpan 在 darwin 13.0.1 上安装 GD 模块

    我在尝试安装 GD 时遇到了困难 我正在运行 Mas OSX 10 9 2 darwin 13 0 1 当我运行这个时 cpan 1 gt 安装 GD perl MCPAN e shell 我收到以下错误 cpan 1 gt install
  • 使用 MinGW 和 libnoise 库的 Netbeans C++

    使用 netbeans 7 2 和最新版本的 MinGW 使用安装程序 我无法使用 libnoise 库 我正确地包含了头文件 自动完成确认了这一点 但是该库根本无法工作 有一个 lib 文件和一个 dll 我尝试了在项目 gt 属性 gt
  • 替换 xml 属性的正则表达式

    我有一个以下形式的 xml 文件
  • 有 MSBuild 替代方案吗?

    我是一名正在接受培训的学生 对 C 的经验很少 我们公司正在开发一个使用T4模板 C VS2010 的解决方案 生成的文件无法在 MSBuild 下编译 因为它依赖于 VS 我的任务是找到一个工具或库或 dll 文件或SDK 或任何可以在构
  • 在Qt5中绘制大量独立角色的最佳方法?

    我正在编写一个显示大量文本的应用程序 但它不是单词和句子 而是以 CP437 字符集显示的二进制数据 目前的形式 但我在绘制这些角色时遇到了问题 我需要一一绘制每个角色 因为稍后我想应用不同的颜色 这些字符也应该有透明的背景 因为稍后我想在
  • Chart Js可点击栏

    我想让我的图表 js 栏可点击 我想添加点击功能 例如链接 不知道如何继续 已阅读文档 10 次