41 votes

Comment afficher la valeur au lieu du pourcentage dans un graphique à secteurs à l'aide de jquery Highcharts

pour un de mes projets, j'utilise un camembert créé avec jQuery Highcharts. ce que j'aime faire, c'est afficher la valeur que j'ai insérée au lieu de la filiation. exemple: le graphique montre firefox - 43,269...% à la place, j'aime montrer la valeur Firefox -45 clics. Est-ce que quelqu'un peut m'aider avec ça. Merci d'avance.

Code graphique

 <!-- 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: 'browser_cart',
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    plotShadow: false
                },
                title: {
                    text: 'Browser market shares at a specific website, 2010'
                },
                tooltip: {
                    formatter: function() {
                        return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
                    }
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: true,
                            color: '#000000',
                            connectorColor: '#000000',
                            formatter: function() {
                                return '<b>'+ this.point.name +'</b>: '+ this.percentage +' clicks';
                            }
                        }
                    }
                },
                series: [{
                    type: 'pie',
                    name: 'Browser share',
                    data: [
                        ['Firefox',   45],
                        ['IE',       26],
                        ['Chrome',   12], 
                        ['Safari',    8],
                        ['Opera',     6],
                        ['Others',   7]
                    ]
                }]
            });
        });

    </script>

</head>
<body>

    <!-- 3. Add the container -->
    <div id="browser_cart" style="width: 800px; height: 400px; margin: 0 auto"></div>


</body>

49voto

Shaikh Mubeen Points 813

Corrigé, juste changé en dessous de la ligne

   format: '<b>{point.name}</b>: {point.percentage:.1f} %',

à

   format: '<b>{point.name}</b>: {point.y:.1f} Rs.',

26voto

sjith Points 156
return '<b>'+ this.point.name +'</b>: '+ this.y +' clicks';

14voto

tulsluper Points 1148

Dans ce cas, vous pouvez remplacer "this.percentage" par "this.point.y"

Regardez formateur : (ancien lien supprimé), nouveau lien - https://api.highcharts.com/highcharts/tooltip.formatter

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X