当前位置: 代码迷 >> JavaScript >> Highcharts最新版本的饼状图,填某些数据时百分比不能显示出来。该如何处理
  详细解决方案

Highcharts最新版本的饼状图,填某些数据时百分比不能显示出来。该如何处理

热度:127   发布时间:2012-06-03 16:59:40.0
Highcharts最新版本的饼状图,填某些数据时百分比不能显示出来。
HTML code
<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Highcharts Example</title>
        
        
        <!-- 1. Add these JavaScript inclusions in the head of your page -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
        <script type="text/javascript" src="../js/highcharts.js"></script>
        
        <!-- 1a) Optional: add a theme file -->
        <!--
            <script type="text/javascript" src="../js/themes/gray.js"></script>
        -->
        
        <!-- 1b) Optional: the exporting module -->
        <script type="text/javascript" src="../js/modules/exporting.js"></script>
        
        
        <!-- 2. Add the JavaScript to initialize the chart on document ready -->
        <script type="text/javascript">
        
            var chart;
            $(document).ready(function() {
                chart = new Highcharts.Chart({
                    chart: {
                        renderTo: 'container',
                        plotBackgroundColor: null,
                        plotBorderWidth: null,
                        plotShadow: true
                    },
                    title: {
                        text: 'Browser market shares at a specific website, 2010'
                    },
                    tooltip: {
                        formatter: function() {
                            return '<b>'+ this.point.name +'</b>: '+ this.y +' %';
                        }
                    },
                    plotOptions: {
                        pie: {
                            allowPointSelect: true,
                            cursor: 'pointer',
                            dataLabels: {
                                enabled: true,
                                color: '#000000',
                                connectorColor: '#000000',
                                formatter: function() {
                                    return '<b>'+ this.point.name +'</b>: '+ this.y +' %';
                                }
                            }
                        }
                    },
                    series: [{
                        type: 'pie',
                        name: 'Browser share',
                        data: [
                            ['Firefox',   25],
                            ['IE',       75],

                        ]
                    }]
                });
            });
                
        </script>
        
    </head>
    <body>
        
        <!-- 3. Add the container -->
        <div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>
        
                
    </body>
</html>


在这个位置data: [
['Firefox', 25],
['IE', 75],
]
填25与75就不能把百分比显示出来
而25与23就可以,请问这是为什么呢?

------解决方案--------------------
呃~·看不出所以然,具体得看这个方法的源码~·
------解决方案--------------------
呵呵 图的问题一般都挺复杂的 就算扒拉源码 也得看一阵子 何况还是jquery 等高人吧~~~
------解决方案--------------------
下面代码能运行,75后面有逗号也可以,但在其它浏览器可能不允许这样(比如FF),所以最好规范些
HTML code
<script type="text/javascript">
var chart;
$(document).ready(function() {
    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
        },
        title: {
            text: 'theforever_csdn Highcharts demo-pie chart'
        },
        tooltip: {
            formatter: function() {
                return '<b>'+ this.point.name +'</b>: '+ this.y +' %';
            }
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    color: '#000000',
                    connectorColor: '#000000',
                    formatter: function() {
                        return '<b>'+ this.point.name +'</b>: '+ this.y +' %';
                    }
                }
            }
        },
     series: [{
            type: 'pie',
            name: 'Browser share',
            data: [
                ['Firefox',   25],
                ['IE',    75],
            ]
        }]
    });
});
</script>