5

ハイチャート パイに問題があります。データをパイに表示したいのですが、パイが非常に小さく、小さな点のようにしか表示されません。

どこでも答えを探していますが、見つかりません。誰かが私に理由を説明してください、私はこのツールの初心者です...

画像載せようとしたけど出来ない…

以下は私のコードです:

<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 に答える