顯示的表格是使用 Highcharts.drawTable 完成的,如下所示,http://jsfiddle.net/BlackLabel/d36fmcj5/由于表格是在餅圖 div 中手動呈現的,因此我需要一種方法來為表格數據添加邊框,如果可能的話,像這樣 在此處輸入圖像描述請幫我解決這個問題。$(function() { Highcharts.setOptions({ colors: [ '#1cc88a', '#008a59', '#6adfb6' ] }); Highcharts.drawTable = function() { // user options var tableTop = 200, colWidth = 60, tableLeft = 50, rowHeight = 20, cellPadding = 2.5, valueDecimals = 1, valueSuffix = ''; // internal variables var chart = this, series = chart.series, renderer = chart.renderer, cellLeft = tableLeft; // draw category labels $.each(series, function(serie_index, serie) { renderer.text( serie.name, cellLeft + cellPadding, tableTop + (serie_index + 1) * rowHeight - cellPadding ) .css({ fontWeight: 'bold' }) .add(); }); $.each(series[0].data, function(i) { renderer.text( series[0].data[i].name, cellLeft + colWidth - cellPadding, tableTop + (i + 2) * rowHeight - cellPadding ) .attr({ align: 'right' }) .add(); }); $.each(series[0].data, function(i) { renderer.text( Highcharts.numberFormat(series[0].data[i].y, valueDecimals) + valueSuffix, 150, tableTop + (i + 2) * rowHeight - cellPadding ) .attr({ align: 'left' }) .add(); }); } $('#container').highcharts({ chart: { //plotBackgroundColor: null, //plotBorderWidth: null, //plotShadow: false, events: { load: Highcharts.drawTable }, height: 400, width: 800, //marginBottom: 250 }, title: { text: undefined }, credits: { enabled: false }, tooltip: { pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' },
在餅圖 Highcharts 中顯示數據表邊框
九州編程
2022-10-08 17:54:54