我正在尝试显示来自内部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中为“类型”参数使用各种各样的类型,但似乎无法让它显示一个简单的折线图/迷你图。
我还深入研究了这些文档。
你知道我可能做错了什么吗?
发布于 2021-09-11 17:26:07
在制作图表的函数中,您将数据指定为具有单个值的数组,以便只绘制一个点,chart.js需要至少2个值才能在它们之间画一条线。
此外,您的图表没有足够的高度来正确显示任何内容,因此,如果您希望图表有用,还需要为容器提供更高的高度
https://stackoverflow.com/questions/69147551
复制相似问题