5

我对 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>

谢谢

4

3 回答 3

2

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

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

于 2013-02-01T10:49:46.040 回答
1

尝试设置生成图表的 div 容器的最小宽度和高度，如下所示

<div id="pie1" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
于 2013-01-31T09:20:34.017 回答
0

使用多个饼图时遇到同样的问题。只有 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">
于 2018-03-19T10:33:20.407 回答