图表显示非常小的馅饼

Question

我有一个highcharts饼的问题,我想把我的数据显示成一个馅饼,但馅饼很小,它只显示像一个小点.

我在任何地方寻找答案,但我找不到它.请一些机构向我解释为什么会这样,我只是新工具...

我试图发布图像,但它不能...

以下是我的代码:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="robots" content="index,archive,follow">
<title>CIT Dashboard</title>
<link rel="stylesheet" media="all" href="css/dashboard.css"/>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/highcharts.js"></script>
<script type="text/javascript">     
    var chart1;
    var chart2;
    $(document).ready(function() {
            chart1 = new Highcharts.Chart({
            chart: {
                renderTo: 'pie1',   
                plotBackgroundColor: '#969696',
                margin: 0,
                padding: 0
            },
            legend: {
                enabled: false
            },
            title: {
                text: ''
            },
            tooltip: {
                formatter: function() {
                    return '<b>'+ this.point.name +'</b>: '+ this.percentage.toFixed(2) +' %';
                }
            },
            plotOptions: {
                pie: {
                    size:'80%',
                    allowPointSelect: true,                 
                    plotBorderWidth: 0,
                    plotShadow: false,              
                    animation: false,
                    shadow: false,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: true,
                        color: '#000000',
                        connectorColor:'#000000',
                        distance: -40,
                        formatter: function() {
                            return '<b>'+ this.point.name +'</b><br />'+ this.percentage.toFixed(2) +' %';
                        }
                    }
                }
            },
            series: [{
                type: 'pie',
                name: 'Transaction by LTS',
                data: [<%=graph1 %>]
            }]
        });


        chart2 = new Highcharts.Chart({
            chart: {
                renderTo: 'pie2',   
                plotBackgroundColor: '#969696',
                margin: 0,
                padding: 0
            },
            legend: {
                enabled: false
            },
            title: {
                text: '',
                margin: 0
            },
            tooltip: {
                formatter: function() {
                    return '<b>'+ this.point.name +'</b>: '+ this.percentage.toFixed(2) +' %';
                }
            },
            plotOptions: {
                pie: {
                    size:'80%',
                    allowPointSelect: true,                 
                    plotBorderWidth: 0,
                    plotShadow: false,              
                    animation: false,
                    shadow: false,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: true,
                        color: '#000000',
                        distance: -40,
                        formatter: function() {
                            return '<b>'+ this.point.name +'</b><br />'+ this.percentage.toFixed(2) +' %';
                        }
                    }
                }
            },
            series: [{
                type: 'pie',
                name: 'Transaction by LTS',
                data: [<%=graph2 %>]
            }]
        });
    });

</script>
</head>

谢谢

Answer 1

尝试设置要生成图表的 div 容器的最小宽度和高度

<div id="pie1" style="min-width: 400px; height: 400px; margin: 0 auto"></div>