亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

在餅圖 Highcharts 中顯示數據表邊框

在餅圖 Highcharts 中顯示數據表邊框

九州編程 2022-10-08 17:54:54
顯示的表格是使用 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>'    },  
查看完整描述

1 回答

?
楊魅力

TA貢獻1811條經驗 獲得超6個贊


我認為更好的解決方案是使用export-data已實現功能的模塊來創建數據表并設置exporting.showTable為true. 該模塊呈現的表格可以通過 CSS 設置樣式。


演示:http: //jsfiddle.net/BlackLabel/f1qh3g58/


exporting: {

    showTable: true,

    tableCaption: false

},

API:https ://api.highcharts.com/highcharts/exporting.showTable


查看完整回答
反對 回復 2022-10-08
  • 1 回答
  • 0 關注
  • 168 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號