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

首先，定义宽度/高度，其次，您可以通过参数修改图表的大小：

http://api.highcharts.com/highcharts#plotOptions.pie.size

Answer 2

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

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

Answer 3

使用mutliple饼图时遇到同样的问题。只有1个饼图的尺寸较小。原因是为div元素设置了max-width。删除max-width属性后，它运行正常。

<div id = "ab" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto">

到

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

图表显示非常小的馅饼

3 个答案: