在带有typescript的角度向jqxGrid小部件注入chart.js迷你图
在带有typescript的角度向jqxGrid小部件注入chart.js迷你图
提问于 2021-09-12 00:06:36
我正在尝试显示来自内部API调用的数据数组中的迷你图。
数据以数字数组的形式出现，并导入import { Chart, registerables } from 'chart.js'; Chart.register(...registerables);。
网格的列包括：
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属性的值，然后在下面创建：
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中为“类型”参数使用各种各样的类型，但似乎无法让它显示一个简单的折线图/迷你图。
我还深入研究了这些文档。
你知道我可能做错了什么吗？
回答 1
Stack Overflow用户
发布于 2021-09-12 01:26:07
在制作图表的函数中，您将数据指定为具有单个值的数组，以便只绘制一个点，chart.js需要至少2个值才能在它们之间画一条线。
此外，您的图表没有足够的高度来正确显示任何内容，因此，如果您希望图表有用，还需要为容器提供更高的高度
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69147551
复制相关文章
相似问题
腾讯云开发者
