使用highcharts调整饼图高度时出错

时间:2017-01-24 13:05:40

标签: javascript highcharts

我想让我的图表与其他div和主div一起内联,但是我无法修复饼图div的高度,我希望删除额外的填充。我该如何实现?

chart.html

<html>
<head>

<script type="text/javascript" src="https://code.highcharts.com/highcharts.js"></script>

<script type="text/javascript" src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script type="text/javascript" src="chart1.js"></script>
</head>
<body>



<div style="width:175px; height :200px">


    <div >
    <table style="width:100%;border:1px solid green">
        <tr>
                <td>Execution %</td>
                <td style="text-align:right">70</td> 
        </tr>
        <tr>
                <td>Pass %</td>
                <td  style="text-align:right">90</td> 
        </tr>

    </table>
    </div>

<div id="chartdiv" style="min-width: 100px; max-width:100%;max-hright:100%;border:3px solid black ">

</div>

</div>

用于渲染此图表的js文件是: -

$(function() {           
   var chart = new Highcharts.Chart('chartdiv',{
        chart: {

            margin: [0, 0, 0, 0],
            spacingTop: 0,
            spacingBottom: 0,
            spacingLeft: 0,
            spacingRight: 0
        },
        credits: {
            enabled: false
        },
        title: {
            text: null
        },
        plotOptions: {
            pie: {
                size:'100%',
                slicedOffset: 0,
                dataLabels: {
                    enabled: false
                }
            }
        },
        series: [{
            type: 'pie',
            name: 'Months',
            data: [
                ['Jan', 45.0],
                ['Feb', 26.8],
                ['Mar', 8.5],
                ['June', 6.2],
                ['July', 21.0]
            ]}]    
    });
});

1 个答案:

答案 0 :(得分:1)

为图表div添加样式 - &#34; chartdiv&#34;

width:100% !important;
height:100% !important;