Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >在带有typescript的角度向jqxGrid小部件注入chart.js迷你图

在带有typescript的角度向jqxGrid小部件注入chart.js迷你图
EN

Stack Overflow用户
提问于 2021-09-11 16:06:36
回答 1查看 79关注 0票数 1

我正在尝试显示来自内部API调用的数据数组中的迷你图。

数据以数字数组的形式出现,并导入import { Chart, registerables } from 'chart.js'; Chart.register(...registerables);

网格的列包括:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
 public columns = [
    {...},
    { text: 'Price Histiory', datafield: 'priceHistory', outerHeight: 100, innerHeight: 100, width: 200, cellsRenderer: (row: any, column: any, value: any, rowData: any) => {
     
        let chart = '<div><canvas id="chart' + row + '"></canvas></div>'
        this.testy('chart'+row, value)
        return chart
          }
        }
  ]

获取我找到的值的唯一方法是创建一个函数,该函数接受来自单元渲染器value属性的值,然后在下面创建:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
  async testy(chart, value){
    await chart
    const ctx = <HTMLCanvasElement> document.getElementById(`${chart}`);
    ctx.style.height = '35px'
    ctx.style.width = '200px'
 
    const myChart = new Chart(ctx, {
      type: 'line',
      data: {
        datasets: [{
          label: '',
          data: [value],
          fill: true,
          borderColor: 'red',
          tension: 0.1
        }]
      }
      }) 
      return myChart
    }

我目前正在获取数据以正确上载号码,但无法显示线路。相反,它显示为:

我尝试过在chart.js中为“类型”参数使用各种各样的类型,但似乎无法让它显示一个简单的折线图/迷你图。

我还深入研究了这些文档。

你知道我可能做错了什么吗?

EN

回答 1

Stack Overflow用户

发布于 2021-09-11 17:26:07

在制作图表的函数中,您将数据指定为具有单个值的数组,以便只绘制一个点,chart.js需要至少2个值才能在它们之间画一条线。

此外,您的图表没有足够的高度来正确显示任何内容,因此,如果您希望图表有用,还需要为容器提供更高的高度

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/69147551

复制
相关文章
迷你图(sparklines)——原来图表可以这么小
今天跟大家分享一种小而美的excel单元格图表——迷你图。 ▼ 这种图表小到可以存放在单独的单元格中,能够展现数据大致趋势和概览,但是对于精准的数据信息表达却并不很清晰,不过可以作为趋势参考。 这
数据小磨坊
2018/04/10
3.9K0
迷你图(sparklines)——原来图表可以这么小
无向图----无向图的实现
术语表: 多重图:将含有平行边的图称为多重图。 简单图:将没有平行边和自环的图称为简单图。 相邻:当两个顶点通过一条边相连时,称这两个顶点相邻,并称这条边依附于这两个顶点。 度数:一个顶点的度数即依附于它的边的总数。 简单路径:是一条没有重复顶点的路径。 简单环:是一条(除了起点和终点必须相同外)没有相同顶点的环。 路径或环的长度:其中所包含的边数。(有权无向图则为边的权重和) 连通图:从任一顶点能够达到另一个任意顶点。 无向图的API: public class Graph Graph(int V) 
SuperHeroes
2018/05/30
2K0
有向图----有向图的实现
术语定义: 一个顶点的出度为由该顶点指出的边的总数 一个顶点的入度为指向该顶点的边的总数 一条有向边的第一个顶点称为它的头,第二个顶点称为它的尾 数据结构: 使用邻接表来表示有向图,其中v->w表示为顶点v对应的邻接链表中包含一个w顶点。 有向图API: public class Digraph Digraph(int V)        创建一个含有V个顶点但不含有边的有向图 int V()        顶点数 int E()        边数 void addEdge(int v,int
SuperHeroes
2018/05/30
1.5K0
迷你图工具汇总~
自小魔方的公众号开通以来,陆陆续续、啰里啰嗦的分享了很多技巧,但是一直觉得很杂乱,缺乏体系,所以以后有必要定期对各系列分享内容进行阶段性总结。 最近一个系列一直在围绕sparklines这款迷你图插件在写,当然限于时间和精力,只能跟着官方的指导文档和操作案例进行,没有对于各类图表的使用场景进行详尽的描述。 我很喜欢用迷你图来表达数据,(当然不是所有的图表类型都适合使用迷你图表达)因为这样做出来的图表显得灵气十足、清新简洁。(主要是可以利用excel单元格这一纯天然的排版利器) 特别是sparklines迷你
数据小磨坊
2018/04/11
1.8K0
迷你图工具汇总~
sparklines——迷你图插件
这段时间迷上了那种袖珍型的迷你图,在之前的分享中曾经分享过关于迷你图的内容,其中涉及到几款制作迷你图的插件(excel内置的三款迷你图就不说了)——Tinygraphs、MicroCarts、Sparlines。 其中Tinygraphs插件所涉及的类型较少,之前分享的时候讲的也比较详细,MicroCarts插件因为有15天的试用期(当初下载的时候算是一时心血来潮,拖延症伤不起)结果——过期了也没想起来去看,就这么白白错过了。 Sparlines插件的图表着实够丰富,但是因为没有中文指南,看英文太费劲儿(主
数据小磨坊
2018/04/11
1.9K0
sparklines——迷你图插件
加权有向图----加权有向图的实现
可以对比加权无向图的实现。 加权有向边API: public class DirectedEdge DirectedEdge(int v,int w,double weight)         double weight()        边的权重 int form()        指出这条边的顶点 int to()        这条边指向的顶点 String toString()        对象的字符串表示 实现: public class DirectedEdge { pri
SuperHeroes
2018/05/30
1.6K0
加权无向图----加权无向图的实现
加权无向图的实现最简单的方法是扩展无向图的表示方法:在邻接表的表示中,可以在链表的结点中增加一个权重域。但这里用另一个方法来实现:我们实现两个类,权重边类和无向图类。无向图类中组合权重边类来实现加权无向图。 加权边API: public class Edge implements Comparable<Edge> Edge(int v,int w,double weight)        构造函数 double weight()        边的权重 int either()        边两
SuperHeroes
2018/05/30
1.4K0
有向图的环和有向无环图
本篇主要分享关于有向图的环和有向无环图(DAG,估计做大数据的同学到处都可以看到),所以相关概念我就不做详细介绍了。
大数据和云计算技术
2018/08/01
1.6K0
有向图的环和有向无环图
有向图,无向图,网络图,加入权重。
import matplotlib.pyplot as plt import networkx as nx H = nx.path_graph(10) G.add_nodes_from(H) nx.draw(G, with_labels=True) plt.show() G=nx.Graph() G.add_edges_from([(1,2),(1,3),(2,4),(2,5),(3,6),(4,8),(5,8),(3,7)]) nx.draw(G, with_labels=True, edge_co
裴来凡
2022/05/28
9980
有向图,无向图,网络图,加入权重。
TypeScript实现图的遍历
有一个图,我们想访问它的所有顶点,就称为图的遍历。遍历图有两种方法:广度优先搜索和深度优先搜索。 图遍历可以用来寻找特定的顶点或寻找两个顶点之间的路径,检查图是否连通。本文将详解图的两种遍历并用TypeScript将其实现,欢迎各位感兴趣的开发者阅读本文。
神奇的程序员
2022/04/10
4580
TypeScript实现图的遍历
TypeScript实现图
图是一个非线性数据结构,本文将讲解图的基本运用,将图巧妙运用,并用TypeScript将其实现,欢迎各位感兴趣的开发者阅读本文。
神奇的程序员
2022/04/10
5780
TypeScript实现图
无向图
今天的主角是无向图,顾名思义,无向图就是边没有方向的图。每当一个概念拿到程序中,总是需要抽象出一个数据结构来表示这个概念。那么,图怎么表示呢?表示图的这个数据结构叫做邻接表。
naget
2019/07/04
8740
无向图
sparklines迷你图系列18——ScatterChart
今天跟大家分享sparklines迷你图系列17——ScatterChart。 ScatterChart是日常使用频率非常频繁的图表——条形图。 在迷你图插件的指导文档里,给迷你散点图提供非常详细的工
数据小磨坊
2018/04/11
8480
sparklines迷你图系列18——ScatterChart
parklines迷你图系列1——Scales
按照之前的计划,今天开始按照sparklines插件的图表分类标准开始跟大家分享详细的做法。 按照该插件在excel菜单中的顺序,先来看测量尺度(Scales)的两个图表类型:Standard、XY。
数据小磨坊
2018/04/11
8680
parklines迷你图系列1——Scales
sparklines迷你图系列2——Performance
昨天跟大家分享了关于sparklines迷你图插件的的第一类图表类型,尺度(Scales)图表类型,今天要分享的是第二个图表类型——在项目标管理中使用频率非常高的子弹图(Bullet)。 当然这些图表
数据小磨坊
2018/04/11
1K0
sparklines迷你图系列2——Performance
sparklines迷你图11——Composition(Stacked)
今天要分享的是sparklines迷你图系列12——Composition(Stacked)。 Stack中文含义为堆积,该图表也就是我们常用到的堆积图。 以上是Stacked图表所有的参数含义及各参
数据小磨坊
2018/04/11
5890
sparklines迷你图11——Composition(Stacked)
Transformer在图的应用——睡前小论文
从本章开始一个新的系列——睡前小论文。此系列主要是一些最近阅读的AI、大模型和网络安全相关的论文。
JDArmy
2023/08/29
2480
Transformer在图的应用——睡前小论文
TypeScript小笔记
比如各种框架的常用类型,ts中内置的常用类型,以及一些容易被忽略和遗忘的点,陆陆续续顺手把他们写到文章中记录起来。
19组清风
2021/11/15
1.1K0
TypeScript小笔记
R语言ggplot2画带有空白格的热图简单小例子
之前有人在公众号留言问文章开头这幅图如何实现,下面的B图是折线图加柱形图,相对比较容易实现,上面的A图稍微有点复杂,我想到的办法是拼图,图A可以看成三个热图,然后加一个堆积柱形图,最后将四个图组合到一起。那就按照这个思路试一下看能不能实现。 首先画热图 这个热图和常规的还稍微有点不太一样,可以简单的理解为带有缺失值的热图,缺失值是空白格,其他值分别填充颜色。 那我们就按照这个思路来构造数据 将数据集按照以上格式整理好,存储在csv文件中。 首先是读入数据 df<-read.csv("example_da
用户7010445
2021/01/06
3.4K0
Typescript 2+迷你书 :从入门到不放弃
众所周知:JS中有这么几种类型的数据: Symbol,boolean,Number,Object[Array在js中也属于对象],undefind,null,String;
CRPER
2018/08/28
8590

相似问题

向Pandas Dataframe添加迷你图

1106

带有依赖注入和缩小的typescript中的角度服务

21

角度图chart.js喷油器错误

21

注入带有角度的组件

10

带有JQuery迷你图的剑道网格模板

10
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文