Highcharts v11 绘制表格

JS: 

const renderer = new Highcharts.Renderer(
	document.getElementById('container'),
	510,
	300
);
let width=490;//表格的宽度
let headerHeight=40//表头高度
let rowHeight=30 //行高度
let header=['英雄名称','输出值<br>\t(%)','每死承伤<br>\t(%)','推塔数<br>\t(个)','击杀数<br>\t(个)','趴窝数<br>\t(个)','最终评分'];//表头模型
let data=[['吕布','22.31','15.26','5','17','9','13.3'],
		  ['貂蝉','6.31','5.16','1','0','12','2.9'],
		  ['马可波罗','33.11','14.21','5','22','11','9.8'],
		  ['典韦','2.31','1.16','0','0','22','2.2'],
		  ['张良','16.66','25.16','10','5','0','11.8']];//行数据
let height=headerHeight+data.length*rowHeight;//获取表格的总高度
let columnWidth=width/header.length //列宽度
const M={x:10,y:7};//文本偏移量 根据实际情况调整 或者动态创建
const padding=0.5;//使边框更加清晰防止出现虚化现象(懂得都懂)
renderer.path(['M', 0+padding, 0+padding, 'H', width+padding,'V',height+padding,'H',0+padding,'Z']).attr({'stroke-width': 1,stroke: 'black'}).add();//绘制表格边框
renderer.path(['M',0+padding,headerHeight+padding,'H',width+padding]).attr({'stroke-width':1,stroke:'black'}).add();//表头横线
header.forEach((head,index)=>{
	let x=index*columnWidth;
	index>0?renderer.path(['M',x+padding,0+padding,'V',height]).attr({'stroke-width':1,stroke:'black'}).add():null;//表格垂直线绘制
	let content=`<div class="text">${head}</div>`;
	renderer.text(content,x+M.x,M.y,false).add()
});
data.forEach((item,index)=>{
	index>0?renderer.path(['M',0+padding,headerHeight+(index*rowHeight)+padding,'H',width+padding]).attr({'stroke-width':1,stroke:'black'}).add():null;//每条数据横线
	const y=headerHeight+index*rowHeight;//获取每行数据基础y值
	//循环表头
	header.forEach((head,headIndex)=>{
		const x=headIndex*columnWidth;
		renderer.text(item[headIndex],x+M.x,y+M.y+5,false).attr({
			'alignment-baseline': 'hanging',
			'text-anchor':'start'
		}).css({
			'font-size':'13px'
		}).add()
	})//每行数据按照列拆分并渲染每列数据
});

HTML 代码:

<script src="https://code.highcharts.com/11.4.1/highcharts.js"></script>
<div id="container" style="height:300px;"></div>
<style>
	.text{
		text-align: center;
		width: fit-content;
		border: 1px solid red;
		alignment-baseline: hanging;
		text-anchor:start;
		font-size:13px;
	}
</style>

 运行效果:

 Vue项目中实战优化版: (加入了transform坐标转换)

rendererTable(chart) {
      console.log(chart)
      let renderer = chart?.renderer
      if (!renderer) {
        return;
      }
      let width = chart?.plotWidth*0.9||490;//表格的宽度
      let headerHeight = 40//表头高度
      let rowHeight = 30 //行高度
      let header = ['英雄名称', '输出值<br>\t(%)', '每死承伤<br>\t(%)', '推塔数<br>\t(个)', '击杀数<br>\t(个)', '趴窝数<br>\t(个)', '最终评分'];//表头模型
      let data = [['吕布', '22.31', '15.26', '5', '17', '9', '13.3'],
        ['貂蝉', '6.31', '5.16', '1', '0', '12', '2.9']];//行数据(实际场景是动态获取的)
      let height = headerHeight + data.length * rowHeight;//获取表格的总高度
      let columnWidth = width / header.length //列宽度
      //定义原点坐标用于坐标转换
      const P = {
        x: chart.plotLeft+20,
        y: 20
      }
      const text_Attributes = {
        'alignment-baseline': 'hanging',
        'text-anchor': 'start',
        transform: `translate(${P.x},${P.y})`
      }

      const border_Attributes = {
        'stroke-width': 1,
        stroke: 'black',
        transform: `translate(${P.x},${P.y})`
      }
      const M = {x: 10, y: 7};//文本偏移量 根据实际情况调整 或者动态创建
      const padding = 0.5;//使边框更加清晰防止出现虚化现象(懂得都懂)
      renderer.path(['M', padding, padding, 'H', width + padding, 'V', height + padding, 'H', padding, 'Z']).attr({...border_Attributes}).add();//绘制表格边框
      renderer.path(['M', padding, headerHeight + padding, 'H', width + padding]).attr({...border_Attributes}).add();//表头横线
      header.forEach((head, index) => {
        let x = index * columnWidth;
        index > 0 ? renderer.path(['M', x + padding, padding, 'V', height]).attr({...border_Attributes}).add() : null;//表格垂直线绘制
        let content = `${head}`;
        renderer.text(content, x + M.x, M.y, false).attr({...text_Attributes}).add()
      });
      data.forEach((item, index) => {
        index > 0 ? renderer.path(['M', padding, headerHeight + (index * rowHeight) + padding, 'H', width + padding]).attr({...border_Attributes}).add() : null;//每条数据横线
        const y = headerHeight + index * rowHeight;//获取每行数据基础y值
        //循环表头
        header.forEach((head, headIndex) => {
          const x = headIndex * columnWidth;
          renderer.text(item[headIndex], x + M.x, y + M.y + 5, false).attr({...text_Attributes}).css({
            'font-size': '13px'
          }).add()
        })//每行数据按照列拆分并渲染每列数据
      });
    }

 实践中发现可以将表格所有内容添加到一个组里面，然后将组translate一次即可，组里面包含的子元素无需再一个个的translate了。

        if (this.chartTableGroup) {
            this.chartTableGroup.destroy();//销毁之前的group如果存在的话
        }
        const {M, L, H, V, Z} = SvgPath;
        this.chartTableGroup = renderer.g('CHART_DYNAMIC_TABLE_GROUP');
        this.chartTableGroup.translate(this.P.x, this.P.y);//坐标转换