Angular+TypeScript中jqxGrid注入Chart.js迷你折线图不显示问题

问题根因 #

• DOM渲染时机错误：cellsRenderer执行时仅返回包含canvas的HTML字符串，此时该节点还未插入页面真实DOM，调用document.getElementById无法获取对应canvas元素，图表初始化直接失败。你写的await chart没有任何作用，chart是字符串类型，await基础类型会直接执行后续逻辑，不会等待DOM挂载完成。
• 图表数据格式错误：你传入的value本身就是价格历史的数值数组，配置里写data: [value]相当于把整个数组作为单个数据项传入，形成了二维数组，Chart.js无法识别有效数据点。同时折线图需要配置x轴的labels属性和数据点一一对应，缺失labels也会导致折线无法渲染。
• 配置项缺失：没有关闭图例、坐标轴等无关元素，同时没有关闭Chart.js默认的响应式尺寸检测，和你手动设置的canvas尺寸冲突，也会导致图表渲染异常。

修复后代码 #

列配置修改

public columns = [
  {...},
  { 
    text: 'Price Histiory', 
    datafield: 'priceHistory', 
    outerHeight: 100, 
    innerHeight: 100, 
    width: 200, 
    cellsRenderer: (row: any, column: any, value: any, rowData: any) => {
      const chartId = 'chart' + row
      // 加延迟保证canvas已插入DOM
      setTimeout(() => {
        this.testy(chartId, value)
      }, 0)
      return `<div><canvas id="${chartId}"></canvas></div>`
    }
  }
]

testy函数修改

async testy(chartId: string, value: number[]){
  const ctx = document.getElementById(chartId) as HTMLCanvasElement;
  if(!ctx) return // 避免拿不到元素报错
  ctx.style.height = '35px'
  ctx.style.width = '200px'

  const myChart = new Chart(ctx, {
    type: 'line',
    data: {
      // 生成和数据长度对应的x轴占位标签
      labels: new Array(value.length).fill(''),
      datasets: [{
        label: '',
        data: value, // 直接传数值数组，不要额外包[]
        fill: true,
        borderColor: 'red',
        tension: 0.1,
        pointRadius: 0 // 隐藏数据点，更符合迷你图样式
      }]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false, // 允许自定义canvas尺寸
      plugins: {
        legend: {
          display: false // 隐藏图例
        },
        tooltip: {
          enabled: false // 不需要悬浮提示可关闭
        }
      },
      scales: {
        x: {
          display: false // 隐藏x轴
        },
        y: {
          display: false // 隐藏y轴
        }
      }
    }
  }) 
  return myChart
}

内容的提问来源于stack exchange，提问作者deitz88