Highcharts组织结构图导出字体大小

问题描述 投票:0回答:1

我正在使用 highcharts 为我们公司渲染组织结构图,在我的网络浏览器中它工作正常,但当我导出到 pdf 时,我的节点中的文本丢失了。 我尝试了多种方法但没有运气。 这是我的小提琴:

Highcharts.chart('container', {
    chart: {
        height: 200,width:400,
        inverted: true
    },

    title: {
        text: ' Ledning'
    },

    accessibility: {
        point: {
            descriptionFormat: '{add index 1}. {toNode.name}' +
                '{#if (ne toNode.name toNode.id)}, {toNode.id}{/if}, ' +
                'reports to {fromNode.id}'
        }
    },
  plotOptions: { 
    series: { 
      cursor: 'pointer',
      point: { 
        events: { 
          click: function() {
            location.href = 'http://google.com';
          }
        }
      }
    }
  },

    series: [{
        type: 'organization',
        name: 'Factory',
        keys: ['from', 'to'],
        nodes: [
                {id: 'AAA', title:'Important person 1', name: 'John Doe',width:120, height:100},
                {id: 'BBB', title:'Important person 2', name: 'Jane Doe',width:120, height:100},
                {id: 'CCC', title:'Important person 3', name: 'Matt Black',width:120, height:100},
                {id: 'DDD', title:'Important person 4', name: 'Millie Liter',width:120, height:100},
                {id: 'EEE', title:'Important person 5', name: 'Nick Some',width:120, height:100},
                {id: 'FFF', title:'Important person 6', name: 'Wednesday Parker Hutchinson',width:120, height:100},
                {id: 'GGG', title:'Important person 7', name: 'Wendy McDonald',width:120, height:100},
                {id: 'HHH', title:'Important person 8', name: 'Natalie Porter',width:120, height:100},
                {id: 'III', title:'Important person 9', name: 'Sir Donald Ravensburger',width:120, height:100},
                {id: 'JJJ', title:'Important person 10', name: 'Mick Dundee',width:120, height:100},
                {id: 'KKK', title:'Important person 10', name: 'Nicki Wicki',width:120, height:100},
        ],      
        data: [
            ['KKK','FFF'],
            ['KKK','JJJ'],
            ['KKK','BBB'],
            ['KKK','III'],
            ['KKK','EEE'],
            ['KKK','DDD'],
            ['KKK','CCC'],
            ['KKK','GGG'],
            ['KKK','AAA'],
            ['KKK','HHH'],
        ],
        levels: [{
            level: 0,
            color: 'silver',
            dataLabels: {
                color: 'black'
            },
            height: 25
        }, {
            level: 1,
            color: 'blue',
            dataLabels: {
                color: 'white'
            },
            height: 25
        }, {
            level: 2,
            color: 'blue',
            dataLabels: {
                color: 'white'
            },
        }, {
            level: 3,
            color: 'blue',
            dataLabels: {
                color: 'white'
            },
        }, {
            level: 4,
            color: 'blue'
        }],     
        colorByPoint: false,
        layout: 'hanging',
        color: '#007ad0',
        dataLabels: {
            color: 'white', style : { fontSize:'25px' }
        },
        borderColor: 'white',
        nodeWidth: 'auto'
    }],
    tooltip: {
        outside: true
    },
    exporting: {
        enabled: true,
        allowHTML: true,
            menuItemDefinitions: {
                downloadPDF: {
                        onclick: function() {
                            this.exportChart({
                                    type: 'application/pdf',
                                    width: null
                            });
                        },
                }
            },
        sourceWidth: 2000,
        sourceHeight: 700,
        chartOptions: {
             nodes: {
                     width: '400px',
                 title: {
                     style: {
                         fontSize:'8px'
                     }
                 },
                 name: {
                     style: {
                         fontSize:'8px'
                     }
                 }
             }
        }
    }
});

https://jsfiddle.net/pju2bfg7/) 对于网页视图的格式感到抱歉,我必须挤压才能到达小提琴中的导出菜单,格式并不重要,重要的是导出为 pdf。 有谁能够在导出时更改节点文本的字体大小吗?

/R

我尝试使用exporting.chartOptions但没有任何运气!

javascript highcharts
1个回答
0
投票

您需要将导出的图表选项设置为与未导出图表相同的级别。例如:

  exporting: {
    enabled: true,
    allowHTML: true,
    chartOptions: {
      chart: {
        width: 2000,
        height: 700
      },
      series: [
        {
          dataLabels: {
            style: {
              fontSize: "12px"
            }
          }
        }
      ]
    }
  }

现场演示:https://jsfiddle.net/BlackLabel/8uhkjset/

API 参考: https://api.highcharts.com/highcharts/series.organization

© www.soinside.com 2019 - 2024. All rights reserved.