具有 X 和 Y 值对的数据

2023-12-01

是否可以在中使用 X 和 Y 对dataChart.js 中用于创建条形图的选项?

data: [
    ['08/09/2016', 12],
    ['09/09/2016', 19]
],

形式为[X, Y]

我在文档中没有找到任何关于它的参考。我越接近,发现这个折线图示例:

            data: [{
                x: -10,
                y: 0
            }, {
                x: 0,
                y: 10
            }, {
                x: 10,
                y: 5
            }]

没有内置方法可以直接使用数据数组来创建图表。

但是您可以使用以下方法创建一个小解决方案Chart.js 插件。它们允许您处理在图表的整个创建过程中触发的事件,例如初始化之前、调整大小之后等。


Follows a small plugin that will populate all the data for you using an array :
var myPlugin = {
    // We edit what is happening before the chart is initialized.
    beforeInit: function(chart) {
        var data = chart.config.data;

        // `APIarray` is what you get from your API.
        // For every data in this array ...
        for (var i = 0; i < APIarray.length; i++) {
            // Populate the labels array with the first value ..
            data.labels.push(APIarray[i][0]);
            // .. and the data with the second value
            data.datasets[0].data.push(APIarray[i][1]);
        }
    }
};

然后您需要将这个新创建的插件添加到您的图表插件服务中:

Chart.pluginService.register(myPlugin);


Make sure to register the plugin before creating the chart (before calling new Chart()), or else it won't work.
I also suggest to have an empty data in your chart (before the plugin occurs) to make sure you won't have data you don't want.

您可以看到一个完整的工作示例在这个jsFiddle上.

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

具有 X 和 Y 值对的数据 的相关文章

  • 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 的笛卡尔坐标系

    我正在尝试使用 Chart js 创建一个笛卡尔坐标系 即坐标几何 该文档实际上指出了 笛卡尔轴 但我没有看到任何证据表明这样的名称是有道理的 我的图表如下
  • ChartJS 仅显示特定刻度的大字体大小

    我试图强调 X 轴上的特定值 如果它满足特定条件 例如 在我的codepen https codepen io nuclearslug pen NJGmmy我只想更改 蓝色 栏的字体大小 这对于 Chart js 来说是可能的吗 var c
  • 内联插件不起作用

    根据Chart js 文档 http www chartjs org docs latest developers plugins html 以下代码应该可以工作 new Chart document getElementById char
  • ChartJS:图表不显示所有数据

    由于某种原因 该图表没有显示数组中的最后两个数据 var data labels Brasil Argentina Chile Paraguai Peru Bol via M xico datasets data 9 19 7 77 6 8
  • Chartjs 在鼠标悬停时非常快速地调整大小(闪烁)

    我在基于引导的页面中有一个图表 我试图在页面调整大小时调整它的大小 以遵循响应式设计的变化 所以我有这段代码 function redrawChart var w chart container width var c document g
  • 如何为 Chart.js (chartjs.org) 中的所有图表类型添加标签/图例?

    Chart js 的文档提到了 图例模板 但没有提供此类图例的资源或示例 这些如何显示呢 您可以在图表选项中包含图例模板 legendTemplate takes a template as a string you can populat
  • 条形图中每个条形有不同的颜色;图表JS

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

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

    我是一名初学者开发人员 我一直在尝试使用 ChartJS 将一些数据显示到屏幕上 我希望能够单击一个按钮来生成另一组新的数据 轴 我一直在尝试遵循其他堆栈溢出答案 但似乎没有一个对我有用 请参见下文
  • 如何防止标签在移动屏幕 Chart.js 上重叠

    我正在使用这个例子jsfiddle https jsfiddle net Trekels fec0v5kj 但是当我使用小屏幕时标签开始像这样重叠 我可以做什么来预防它 我想让它完全响应 我尝试改变长度和其他长宽比等 但没有成功 var c
  • 如何在多行字符中只显示一个标签?

    我使用 Chart js 创建一个图表 该图有两条线 因此它默认也显示两个标签 但我需要一种配置 其中应该显示红色标签 而应该隐藏蓝色标签 标签not线 感谢您的帮助 var config type line data labels 16
  • 使 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 计算的宽度和高度属性似乎基于父元素的总宽度和高度 忽略填充 var options maintainAspectRatio false responsive true v
  • 添加 X 轴标题会导致 Uncaught RangeError:minimumFractionDigits value is out of range in Chart.js

    我正在尝试向 Chart js 图表的 X 轴添加标题 但是当我将标题属性放在 x 轴上时 出现错误 Uncaught RangeError minimumFractionDigits value is out of range 但它并没有
  • 向 ChartJS 数据点添加逗号

    我需要在 ChartJS 图表中的数字中添加逗号 前任 数据点可能是 1032 05 4334 75 8482 46 我需要它显示为 1 032 05 4 334 75 8 482 46 以下是包含当前代码的开发网站的链接 投资计算器 ww
  • 使用chartJS显示带有连接点的折线图

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

    我是 Chart js 的新手 看到了 v3 文档 Chart js 3 是可摇树的 因此有必要导入并注册您将要使用的控制器 元素 比例和插件 我想知道在哪里可以找到这些用于注册的东西 例如需要注册什么这个例子 https www char

随机推荐

  • Objective-C 使用动态绑定,但如何实现呢?

    我知道 Objective C 对所有方法调用都使用动态绑定 这是如何实施的 Objective c 是否在编译前 转换为 C 代码 并仅使用 void 指针来处理所有内容 从概念上讲 发生的事情是有一个调度程序库 通常称为 Objecti
  • 创建新的 Backbone 视图时如何知道元素是否已经在 DOM 中

    情况是这样的 当页面第一次打开时 服务器 php 已经准备好了DOM 如果用户打开了 javascript 那么我想将我的页面转换为网络应用程序 或任何你所说的 一旦 Javascript 初始化 Backbone 就会从服务器获取集合 问
  • 具有动态 ID 的 VBA getElementById

    我一直在搜索整个论坛 msdn 和专业教程 但找不到 VBA 的答案 我怎样才能使getElementById在访问 VBA 模块中工作 其中要查找的 id 是动态的 我们看一下html代码 div div class contactsCa
  • 用正确的整数类型替换数组访问变量

    我有使用 int 访问数组的习惯 尤其是在 for 循环中 然而我最近发现我可能一直 做错了 而且我的 x86 系统一直向我隐瞒真相 事实证明 int 没问题sizeof size t sizeof int 但当在系统上使用时sizeof
  • 将字节数组插入 SQL Server

    我正在构建一个sql insert string用于Microsoft ApplicationBlocks Data SqlHelper使用方法如下 SqlHelper ExecuteNonQuery Transaction Command
  • #ref:空手道工具中的 java.util.LinkedHashMap 错误

    def template1 name1 value1 name2 value2 def template2 template1 Def jsontemplate json1 template1 json2 template2 Print j
  • 打印 HttpParams / HttpUriRequest 的内容?

    我有一个HttpUri请求例如 有没有办法打印它包含的所有参数 例如 我几乎可以得到它们 HttpUriRequest req HttpParams params req getParams for int i 0 i lt params
  • Swift:如何找到 UILabel 中字母的位置(x,y)?

    我试图找到 labelText 中字母的位置 Objective C 中的代码是 NSRange range Good Morning rangeOfString NSString prefix Good Morning substring
  • 使用razor引擎在mvc4中重写url

    我想重写以下网址 http localhost 99 Product CategoryLevel CategoryId 65 ProductName Vitamins with http localhost 99 Product Vitam
  • 我的 imageIcon 不起作用?

    我正在尝试设置 JFrame imageIcon 但由于某种原因它没有显示在 JFrame 中 ImageIcon img new ImageIcon stop jpg frame setIconImage img getImage 我创建
  • 比较 dd/mm/yyyy 格式的 2 个日期的最短方法

    谁能建议进行这种比较的最巧妙的方法 我需要测试以 dd mm yyyy 格式提供的日期是否小于固定日期 例如 01 05 2009 我知道我可以使用 strtotime 将它们转换为 unix 时间格式 然后进行比较 但我 我很好奇是否有更
  • 将 bean 自动装配到 JSF 托管 bean 时为空指针

    我使用 Spring Java 邮件和 Velocity 模板开发了一个电子邮件服务 如下所示 电子邮件 java Component public class Email private JavaMailSender mailSender
  • 1.Javascript中的toString()语法错误

    为什么下面的第一行给出错误 而第二行和第三行工作正常 1 toString SyntaxError 1 toString OK 1 toString OK The 存在歧义 它是小数还是属性访问器 解释器将其视为十进制 因此您可以使用 允许
  • 使用 javascript 压缩所有表单数据

    我想压缩一个包含超过 1000 个变量的巨大 HTML 表单中的所有数据 以规避 5 3 9 之前的 PHP 版本中的 max input vars 限制 如何使用 javascript 读取 HTML 表单中的所有数据 将其序列化 或创建
  • 从命令行编译 CUDA 代码

    我正在尝试使用以下语法从命令行编译 CUDA 代码 nvcc c MyFile cu ccbin C Program Files x86 Microsoft Visual Studio 10 0 VC bin 我安装了 CUDA Toolk
  • 如何在cakephp中循环创建pdf文件?

    我已经实现了pdf创建 http bakery cakephp org articles kalileo 2010 06 08 creating pdf files with cakephp and tcpdf 但按照我的逻辑 有一个链接
  • 从tinyMCE中的插入符位置删除x个字符

    我正在开发一个项目 用户可以输入特殊字符 然后按 Tab 键自动完成值 这部分大部分工作正常 但我希望能够从插入符位置之前删除 x 个字符 例如 如果 是插入符号 我有以下文本 chr 我希望能够删除光标位置之前的 3 个字符 例如我最终会
  • 使用 flags() 创建一个 QTableWidgetItem

    我不明白 QTableWidgetItem Chapter 中的 Qt5 文档 我无法获得正确的参数来将新创建的表格单元设置为可编辑 我有这段代码 for i item in enumerate event desc start 0 pri
  • 如何消除结构体数据成员之间的填充字节

    我有一个带有 消息 的二进制文件 我试图使用结构将字节放入正确的变量中 在我的示例中 我使用了两种类型的消息 Tmessage 和 Amessage include
  • 具有 X 和 Y 值对的数据

    是否可以在中使用 X 和 Y 对dataChart js 中用于创建条形图的选项 data 08 09 2016 12 09 09 2016 19 形式为 X Y 我在文档中没有找到任何关于它的参考 我越接近 发现这个折线图示例 data